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 nécessitent une puce personnalisée (image d'arrière-plan) et l'opacité de la puce personnalisée doit ê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 de 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 également essayé d'utiliser rgba, mais cela n'a aucun effet sur l'image d'arrière-plan:

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

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>

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

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 souhaitez pas que la transparence affecte l'ensemble du conteneur 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/

Si vous utilisez l'image comme une puce, vous pouvez envisager le pseudo-élément: avant.

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

Vous pouvez mettre l'image dans le div: après ou div: avant et définir l'opacité sur ce "div virtuel"

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

trouvé ici http://css-tricks.com/snippets/css/transparent-background-images/

#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 d'index z afin que vous ne puissiez pas vous soucier des valeurs globales d'index z. (Essayez de le supprimer et voyez ce qui se passe dans la prochaine démo où le wrapper parent a un z-index positif.)
Si votre élément a déjà un z-index, alors vous n'avez pas besoin de ce hack.

Démo de cette technique .

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

1. utilisez 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-y un arrière-plan et après l'avoir rendu semi-transparent, placez-le derrière les enfants mentionnés.

Une autre option est l' approche CSS Tricks consistant à insérer un pseudo-élément de la taille exacte de l'élément d'origine juste derrière pour simuler l'effet d'arrière-plan 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;   
}

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

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

PS: je poste cela comme une réponse, car SO, a besoin d'au moins 6 caractères modifiés pour une modification.

Pour vraiment affiner les choses, je recommande de placer les sélections appropriées dans les wrappers de ciblage du navigateur. C'est la seule chose qui a fonctionné pour moi quand je n'ai pas réussi à faire fonctionner IE7 et IE8 "avec les autres" (car je travaille actuellement pour une société de logiciels qui continue de les soutenir).

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

Je peux avoir des redondances dans le code ci-dessus - si quelqu'un souhaite le nettoyer davantage, n'hésitez pas!

Si vous devez définir l'opacité uniquement sur la puce, pourquoi ne définissez-vous pas le canal alpha directement dans l'image? Au fait, je ne pense pas qu'il existe un moyen de définir l'opacité d'une image d'arrière-plan via css sans changer l'opacité de l'élément entier (et de ses enfants aussi).

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 donc en tant que parent cela n'affectera pas l'enfant. Cela ne fonctionne que sur Chrome, FF, Safari et .... I thin O.

convertir vos couleurs hexadécimales en RGBA

J'ai trouvé un tutoriel assez bon et simple sur ce problème. Je pense que cela fonctionne très bien (et même s'il prend en charge IE, je dis simplement à mes clients d'utiliser d'autres navigateurs):

Transparence d'arrière-plan CSS sans affecter les éléments enfants, via RGBa et filtres

De là, vous pouvez ajouter un support de dégradé, etc.

#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 démo