Modifier l'opacité de l'image d'arrière-plan tout en préservant la visibilité des éléments enfants

Question

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 du pied de page nécessitent des puces personnalisées (image d'arrière-plan) et l'opacité des puces personnalisées 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é de l'élément de 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 aussi essayé d'utiliser rgba mais cela n'a eu 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%;
}

Answer 1

Vous pouvez utiliser CSS linear-gradient() 与 rgba() ensemble.

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>