Fond transparent sur DIV

Question

Pourquoi le DIV interne devient-il transparent lorsque j'utilise ce code?
Mon plan était d'avoir le texte visible et transparent.
Dois-je faire flotter le div interne sur le div transparent?

Vous pouvez voir la démo en direct ici: http://jsfiddle.net/pBAf5/

HTML

<div class="openinghours floatRight"> 
    <div class="content">My test goes here</div> 
</div> 

CSS

.openinghours { 
    height: 70px; 
    width: 300px; 
    padding: 10px; 
    font-size: 0.85em; 
    background-color: #f6f6f6; 
    border: solid 1px #c7c7c7; 
    margin-right: 20px; 
    margin-top: 5px; 
    opacity: .5; 
    filter: alpha(opacity=50); 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

Answer 1

Utilisez rgba ou .png transparent, ou déplacer le texte intérieur dans un nœud frère du opacité div.

Answer 2

L'attribut opacity affecte non seulement la div parente, mais aussi les divs enfants. Pour obtenir l'effet que vous désirez, vous devez utiliser un arrière-plan transparent sur la div parente. Cela peut être fait en utilisant RGBA pour la couleur d'arrière-plan de la div parente (pas complètement cross-browser) ou en utilisant un PNG transparent comme image d'arrière-plan de la div parente.