Opacità CSS e elementi figlio

 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); }  
Lorem
ipsum
dolor

Nell’esempio sopra, l’opacità di div#foo viene ereditata dagli elementi figlio, facendo sì che il testo diventi quasi illeggibile. 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 di solito uso 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.

Puoi usare rgba () .

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

Per farlo funzionare nei vecchi Internet Explorer usa CSS PIE . Ci sono alcune limitazioni , ma queste sono gestite in un modo compatibile all’indietro: il valore RGB sarà reso correttamente e l’opacità verrà ignorata.

Il modo migliore è impostare png trasparente sullo sfondo ..

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%.