É possível definir a opacidade de uma imagem de plano de fundo sem afetar a opacidade dos elementos filho?

Exemplo

Todos os links no rodapé precisam de um marcador personalizado (imagem de plano de fundo) e a opacidade do marcador personalizado deve ser 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%;
}  

O que eu tentei

Tentei definir a opacidade dos itens da lista como 50%, mas a opacidade do texto do link também é de 50% - e não parece haver uma maneira de redefinir a opacidade dos elementos filho:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

Também tentei usar o rgba, mas isso não afeta a imagem de fundo:

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

Você pode usar CSS linear-gradient()com 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>

Leve sua imagem para um editor de imagens, diminua a opacidade, salve-a como um .png e use-a.

Isso funcionará com todos os navegadores

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

Se você não deseja que a transparência afete o contêiner inteiro e seus filhos, verifique esta solução alternativa. Você deve ter um filho absolutamente posicionado com um pai relativamente posicionado.

Verifique a demonstração em http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Se você estiver usando a imagem como marcador, considere o pseudo-elemento: before.

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

Você pode colocar a imagem na div: after ou div: before e definir a opacidade nessa "div virtual"

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

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

Hackear com opacidade .99 (menos de 1) cria o contexto do índice z, assim você não pode se preocupar com os valores globais do índice z. (Tente removê-lo e veja o que acontece na próxima demonstração em que o wrapper pai possui um índice z positivo.)
Se o seu elemento já possui um índice z, você não precisa desse hack.

Demonstração desta técnica .

Infelizmente, no momento em que escrevemos esta resposta, não havia uma maneira direta de fazer isso. Você precisa:

1. use uma imagem semitransparente como plano de fundo (muito mais fácil).
2. adicione um elemento extra (como div) ao lado dos filhos que você deseja opaco, adicione fundo a ele e depois de torná-lo semitransparente, posicione-o atrás dos filhos mencionados.

Outra opção é a abordagem CSS Tricks de inserir um pseudo-elemento do tamanho exato do elemento original logo atrás dele para falsificar o efeito de fundo opaco que estamos procurando. Às vezes, você precisará definir uma altura para o pseudo elemento.

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

A propriedade "filter" precisa de um número inteiro para a porcentagem de opacidade, em vez de duas vezes, para trabalhar no IE7 / 8.

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

PS: Postei isso como resposta, já que o SO precisa de pelo menos 6 caracteres alterados para uma edição.

Para realmente ajustar as coisas, recomendo colocar as seleções apropriadas nos wrappers de segmentação por navegador. Essa foi a única coisa que funcionou para mim quando não consegui fazer com que o IE7 e o IE8 "brincassem bem com os outros" (como atualmente trabalho para uma empresa de software que continua a apoiá-los).

/* 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);
}

Talvez eu tenha redundâncias no código acima - se alguém quiser limpá-lo ainda mais, fique à vontade!

Se você precisa definir a opacidade apenas como marcador, por que não define o canal alfa diretamente na imagem? A propósito, acho que não há uma maneira de definir a opacidade para uma imagem de plano de fundo via css sem alterar a opacidade de todo o elemento (e de seus filhos também).

Apenas para adicionar ao exposto ... você pode usar o canal alfa com os novos atributos de cores, por exemplo. rgba (0,0,0,0) ok, então isso é preto, mas com opacidade zero, para que, como pai, não afete a criança. Isso funciona apenas no Chrome, FF, Safari e ...

converta suas cores hexadecimais em RGBA

Encontrei um tutorial muito bom e simples sobre esse problema. Eu acho que funciona muito bem (e, embora seja compatível com o IE, eu apenas digo aos meus clientes para usar outros navegadores):

Transparência em segundo plano CSS sem afetar elementos filho, através de RGBa e filtros

A partir daí, você pode adicionar suporte ao gradiente 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;
    }

Você pode tentar este código. Eu acho que vai dar certo. Você pode visitar a demo