css Définir l'opacité de l'image d'arrière-plan sans affecter les éléments enfants




opacité background image css (12)

Est-il possible de définir l'opacité d'une image d'arrière-plan sans affecter l'opacité des éléments enfants?

Exemple

Tous les liens dans le pied de page ont besoin d'une puce personnalisée (image de fond) et l'opacité de la puce personnalisée devrait être de 50%.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

Ce que j'ai essayé

J'ai essayé de définir l'opacité des éléments de la liste à 50%, mais l'opacité du texte du lien est également de 50% - et il ne semble pas y avoir un moyen de réinitialiser l'opacité des éléments enfants:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

J'ai aussi essayé d'utiliser rgba, mais cela n'a aucun effet sur l'image de fond:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

Juste pour ajouter à ce qui précède .. vous pouvez utiliser le canal alpha avec les nouveaux attributs de couleur, par exemple. rgba (0,0,0,0) ok donc c'est noir mais avec une opacité nulle alors en tant que parent cela n'affectera pas l'enfant. Cela ne fonctionne que sur Chrome, FF, Safari et .... Je mince O.

convertissez vos couleurs hexadécimales en RGBA


Une autre option est l'approche de CSS Tricks consistant à insérer un pseudo-élément avec la taille exacte de l'élément original juste derrière pour simuler l'effet de fond opaque que nous recherchons. Parfois, vous devrez définir une hauteur pour le pseudo-élément.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Si vous utilisez l'image comme une puce, vous pouvez considérer l'élément: before pseudo.

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}

Cela fonctionnera avec tous les navigateurs

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Si vous ne voulez pas que la transparence affecte le conteneur entier et ses enfants, vérifiez cette solution de contournement. Vous devez avoir un enfant absolument positionné avec un parent relativement positionné.

Vérifiez la démo sur http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/


#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

Vous pouvez essayer ce code. Je pense que ça va marcher. Vous pouvez visiter la demo


Prenez votre image dans un éditeur d'image, baissez l'opacité, enregistrez-la au format .png et utilisez-la à la place.


#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

Hack avec opacité .99 (moins de 1) crée un contexte z-index afin que vous ne pouvez pas vous soucier des valeurs z-index globales. (Essayez de l'enlever et de voir ce qui se passe dans la démo suivante où le wrapper parent a un z-index positif.)
Si votre élément a déjà z-index, vous n'avez pas besoin de ce hack.

Démonstration de cette technique .


La propriété "filter", nécessite un entier pour le pourcentage d'opacité au lieu de double, afin de fonctionner pour IE7 / 8.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

PS: Je publie ceci comme une réponse, puisque SO, a besoin d'au moins 6 caractères changés pour une édition.


Si vous devez définir l'opacité uniquement sur la puce, pourquoi ne définissez-vous pas la couche alpha directement dans l'image? D'ailleurs, je ne pense pas qu'il existe un moyen de définir l'opacité d'une image de fond via css sans changer l'opacité de l'élément entier (et de ses enfants aussi).


Vous pouvez utiliser CSS linear-gradient() avec rgba() .

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}
<div><span>Hello world.</span></div>



Malheureusement, au moment d'écrire cette réponse, il n'y a pas de moyen direct de le faire. Tu dois:

  1. utiliser une image semi-transparente pour le fond (beaucoup plus facile).
  2. ajoutez un élément supplémentaire (comme div) à côté des enfants dont vous voulez l'opaque, ajoutez un arrière-plan et, après l'avoir rendu semi-transparent, placez-le derrière les enfants mentionnés.






opacity