Comment appliquer une opacité sans affecter un élément enfant avec html/css ?

Question

Je veux y parvenir en utilisant html et css :

J'ai essayé de régler l'opacité du conteneur à 0,3 et la boîte à 1, mais cela ne fonctionne pas : les deux div ont une opacité de 0,3.

jsFiddle de mon essai ici

L'effet que j'essaie d'obtenir est une boîte contextuelle qui apparaît en haut de la page. Il est mis en évidence en estompant le contenu ci-dessous (en diminuant l'opacité).

Answer 1

Vous pouvez utiliser l'opacité en combinaison avec la couleur d'arrière-plan, comme ceci :

 #container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}

 <div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>

Démo en direct

Answer 2

L'utilisation de background-color: rgba(#777788, 0.3); au lieu de l'opacité pourrait peut-être résoudre le problème.