opacità CSS e bambino elementi

Question

<style type="text/css"> 
div#foo { 
    background: #0000ff; 
    width: 200px; 
    height: 200px; 

    opacity: 0.30; 
    filter: alpha(opacity = 30); 
} 
div#foo>div { 
    color: black; 
    opacity:1; 
    filter: alpha(opacity = 100); 
} 
</style> 

<div id="foo"> 
    <div>Lorem</div> 
    <div>ipsum</div> 
    <div>dolor</div> 
</div> 

Nell'esempio di cui sopra, l'opacità del div#foo viene ereditata da elementi figlio, causando il testo a diventare quasi illeggibili. Suppongo sia sbagliato dire che è ereditato, che l'opacità è applicata al genitore div e che i bambini ne fanno parte, quindi il tentativo di sovrascriverlo per gli elementi figli non funziona perché tecnicamente sono opachi.

In genere, in questi casi, utilizzo solo un'immagine di sfondo pha alpha, ma oggi mi chiedo se c'è un modo migliore per rendere semitrasparente uno sfondo di un div senza influire sul contenuto.

Answer 1

È possibile utilizzare rgba().

div#foo 
{ 
    background: rgba(0, 0, 255, 0.3); 
} 

per farlo funzionare in vecchi Explorers Internet utilizzare CSS PIE. Ci sono some limitations, ma questi sono gestiti in un modo compatibile all'indietro: il valore RGB sarà reso correttamente e l'opacità sarà ignorata.

Answer 2

Se si utilizza l'opacità, è necessario inserirli in DIV separati e quindi allinearli insieme. Lo sfondo DIV avrebbe l'opacità inferiore e il DIV in primo piano avrebbe il tuo contenuto con un'opacità del 100%.

Answer 3

Il modo migliore è l'impostazione png trasparente per sfondo ..