Définir l’opacité de l’image d’arrière-plan sans affecter les é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 d'enfant?

Exemple

Tous les liens dans le pied de page ont besoin d'un custom de balle (image de fond) et l'opacité de la coutume de balle 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é le réglage de l'opacité des éléments de la liste à 50%, mais ensuite l'opacité du texte du lien est également de 50% - et il ne semble pas être 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 aucune incidence 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

Prenez votre image dans un éditeur d’image, baissez l’opacité, enregistrez-le sous un .png et utiliser à la place.

Answer 2

Ceci fonctionnera avec tous les navigateurs

Si vous ne voulez pas de transparence, d’affecter l’ensemble conteneur et ses enfants, vérifier cette solution de contournement. Vous devez avoir un positionnement absolu enfant dont un parent relativement positionné.

Démo de cocher au http://www.impressivewebs.com/css-opacity-that-doesn ' t-affect-enfant-elements /

Answer 3

Si vous utilisez l’image comme une balle, vous pouvez envisager le : avant pseudo élément.

Answer 4

Vous pouvez mettre l’image dans la balise div : après ou div : avant et réglez l’opacité sur cette « div virtuel »

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

Answer 5

Malheureusement, au moment de la rédaction de cette réponse, il est Impossible sans cela. Vous devez :

1. utiliser une image semi-transparente pour le fond (plus facile).
2. Ajouter un élément supplémentaire (comme div) à côté des enfants que vous voulez l’opaque, ajouter le fond et après rendant semi-transparente, positionnez-le derrière les enfants mentionnés.