opacité CSS et éléments enfants

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>

Dans l'exemple ci-dessus, l'opacité des div#foo est héritée par des éléments de l'enfant, ce qui provoque le texte à devenir presque illisible. Je suppose qu'il est faux de dire qu'il est héritée, l'opacité est appliquée à la div mère et les enfants font partie de cela, afin de tenter de passer outre pour les éléments enfants ne fonctionnent pas parce qu'ils sont techniquement opaques.

En général, je viens d'utiliser une image d'arrière-plan alpha .png dans de tels cas, mais aujourd'hui, je me demande s'il y a une meilleure façon de faire un fond d'un semi-transparent div sans affecter le contenu.

Answer 1

Vous pouvez utiliser RGBA () .

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

Pour le faire fonctionner dans les anciens explorateurs Internet utiliser CSS PIE . Il y a certaines limites , mais ceux qui sont traitées de manière rétrocompatible: la valeur RGB sera rendu correctement et l'opacité sera ignorée.

Answer 2

La meilleure façon est mise à fond transparent .png ..

Answer 3

Si vous utilisez l'opacité, vous auriez à les mettre dans DIV séparés, puis de les aligner ensemble. La DIV de fond aurait l'opacité plus faible, et de premier plan DIV aurait votre contenu avec une opacité de 100%.