opacité background image css




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

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/

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%;
}


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.


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.

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


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).


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;   
}


#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


#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 .







opacity