È possibile impostare l'opacità di un'immagine di sfondo senza influire sull'opacità degli elementi figlio?

Esempio

Tutti i collegamenti nel piè di pagina richiedono un punto elenco personalizzato (immagine di sfondo) e l'opacità del punto elenco personalizzato deve essere del 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%;
}  

Quello che ho provato

Ho provato a impostare l'opacità degli elementi dell'elenco sul 50%, ma anche l'opacità del testo del collegamento è del 50% - e non sembra esserci un modo per ripristinare l'opacità degli elementi figlio:

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

Ho anche provato a usare rgba, ma ciò non ha alcun effetto sull'immagine di sfondo:

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

Puoi usare CSS linear-gradient()con 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>

Porta la tua immagine in un editor di immagini, abbassa l'opacità, salvala come .png e usala invece.

Funzionerà con ogni browser

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 non si desidera che la trasparenza influisca sull'intero contenitore e sui relativi figli, controllare questa soluzione alternativa. Devi avere un figlio assolutamente posizionato con un genitore relativamente posizionato.

Controlla la demo su http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Se stai usando l'immagine come un punto elenco, potresti considerare lo 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;
}

Puoi mettere l'immagine nel div: after o div: before e impostare l'opacità su quel "div virtuale"

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

trovato qui 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 con opacità .99 (meno di 1) crea un contesto z-index in modo da non poterti preoccupare dei valori globali di z-index. (Prova a rimuoverlo e vedi cosa succede nella prossima demo in cui il wrapper principale ha z-index positivo.)
Se il tuo elemento ha già z-index, non hai bisogno di questo hack.

Demo di questa tecnica .

Sfortunatamente, al momento di scrivere questa risposta, non esiste un modo diretto per farlo. Devi:

1. usa un'immagine semi-trasparente per lo sfondo (molto più semplice).
2. aggiungi un elemento extra (come div) accanto ai bambini di cui vuoi l'opaco, aggiungi lo sfondo e dopo averlo reso semitrasparente, posizionalo dietro i bambini menzionati.

Un'altra opzione è l' approccio CSS Tricks per inserire uno pseudo elemento delle dimensioni esatte dell'elemento originale proprio dietro di esso per falsare l'effetto di sfondo opaco che stiamo cercando. A volte dovrai impostare un'altezza per lo 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;   
}

La proprietà "filtro" ha bisogno di un numero intero per percentuale di opacità anziché doppia, per funzionare con IE7 / 8.

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

PS: inserisco questo come una risposta, dal momento che SO, ha bisogno di almeno 6 caratteri modificati per una modifica.

Per ottimizzare davvero le cose, ti consiglio di inserire le selezioni appropriate nei wrapper di targeting per browser. Questa è stata l'unica cosa che ha funzionato per me quando non sono riuscito a convincere IE7 e IE8 a "giocare bene con gli altri" (poiché attualmente sto lavorando per una società di software che continua a supportarli).

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

Potrei avere esuberi nel codice sopra - se qualcuno desidera ripulirlo ulteriormente, sentiti libero!

Se devi impostare l'opacità solo sul punto elenco, perché non imposti il ​​canale alfa direttamente nell'immagine? A proposito, non penso che ci sia un modo per impostare l'opacità su un'immagine di sfondo tramite css senza cambiare l'opacità dell'intero elemento (e anche dei suoi figli).

Solo per aggiungere a quanto sopra .. è possibile utilizzare il canale alfa con i nuovi attributi di colore, ad es. rgba (0,0,0,0) ok quindi questo è nero ma con opacità zero, quindi come genitore non influenzerà il bambino. Funziona solo su Chrome, FF, Safari e .... I thin O.

converti i tuoi colori esadecimali in RGBA

Ho trovato un tutorial abbastanza buono e semplice su questo problema. Penso che funzioni benissimo (e sebbene supporti IE, dico solo ai miei clienti di usare altri browser):

Trasparenza dello sfondo CSS senza influire sugli elementi figlio, tramite RGBa e filtri

Da lì puoi aggiungere il supporto per il gradiente, ecc.

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

Puoi provare questo codice. Penso che funzionerà. Puoi visitare la demo