web-dev-qa-db-fra.com

Comment puis-je changer l'opacité de l'image d'arrière-plan sans changer le contenu div?

Je veux savoir que "Comment puis-je changer l'opacité de l'image d'arrière-plan sans changer le contenu div?"

J'ai trop cherché et je ne trouve pas de bonne réponse pour résoudre ce problème!

HTML

<div class="div-1">
    <h2>title</h2>
    <p>text</p></div>

CSS

.div{
position:relative;
width:200px;
height:200px;
float:left;
color:white;
background:#7a8586 url('url') no-repeat local right;
overflow:hidden;
text-align: justify;
font-family:arial;
font-size:14px;}
csscss3opacity
5
hadivoice

Étant donné que tous les enfants d'un élément sont affectés par son code CSS, vous ne pouvez pas simplement définir l'opacité d'une image d'arrière-plan. Toutefois, plusieurs solutions de contournement sont proposées:

1. Utilisez des images d'arrière-plan transparent (plus facile imo)

Plutôt que de régler l'opacité de l'image d'arrière-plan après coup, il suffit de rendre cette dernière transparente dans votre éditeur d'images préféré (essayez gimp, c'est gratuit!) et enregistrez-la sous la forme d'une image transparente (comme au format PNG).

2. Utilisez le positionnement.

Si vous faites en sorte que l'élément parent ait un positionnement relatif et que vous positionnez absolument des éléments enfants à l'intérieur, vous les retirez du flux et ils ne seront pas affectés par l'opacité du parent. [La source]

3. Utilisez des éléments frères dans la même position

Si vous séparez le contenu du parent et faites en sorte que les deux éléments deviennent frères, vous pouvez positionner les éléments qui étaient des enfants sur le parent avec le z-indexing et définir l'opacité du parent sans affecter l'enfant.

Il y en a plus, mais un de ceux-ci devrait vous donner ce que vous voulez.

7
David

D&EACUTE;MO

Vous pouvez utiliser le pseudo-élément after ou before pour background-image.

Css:

.has-bg-img{
    position: relative;
}
.has-bg-img:after {
    content:'';
    background: url('http://placehold.it/500x100') no-repeat center center;
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:-1;
    opacity: 0.2; /* Here is your opacity */
}
7
Imran Bughio

Il n'y a pas de propriété CSS opacité de fond, mais vous pouvez la simuler en insérant un pseudo-élément à opacité régulière de la taille exacte de l'élément situé derrière.

vérifier comment est fait http://css-tricks.com/snippets/css/transparent-background-images/

3
patas1818

Vous pouvez essayer ceci .....

 <div style="position:relative; ">      
      <div style=" background-image:url(url); opacity:0.5;filter:alpha(opacity=40);height:520px; width:520px;"></div>

       <div style="position:absolute; top:10px; z-index:100;left:10px;height:500px;idth:500px;">
            Your Div Contents are  Here..................
       </div>
    </div>
0
Md. Rahman