l'opacità CSS e elementi figlio

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 precedente, l'opacità di div#foo viene ereditato da elementi secondari, causando il testo diventi quasi illeggibili. Suppongo che sia sbagliato dire che è ereditata, l'opacità viene applicata al div genitore ed i bambini sono parte di questo, quindi tentando di ignorare per gli elementi figli non funziona perché tecnicamente sono opachi.

Io di solito basta usare un'immagine di sfondo alfa png in questi casi, ma oggi mi chiedo se c'è un modo migliore per fare uno sfondo di un div semi-trasparente senza interessare il 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 alcune limitazioni , ma questi sono trattati in modo compatibile all'indietro: la valore RGB sarà reso correttamente e l'opacità verrà ignorato.

Answer 2

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

Answer 3

Se si utilizza l'opacità, che avrebbe dovuto metterli in DIV separata e poi in fila insieme. Lo sfondo DIV avrebbe l'opacità più bassa, e il primo piano DIV avrebbe sul suo sito web con il 100% di opacità.