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

 
 
Link 1
 
Link 2
 
Link 3
 
Link 4
 
Link 5
 
 

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