何か入れ子の要素があった時、親要素と子要素で同一のスタイルを当てていて、それがopacityを指定しているならば、子要素の透明度は重複します。つまり、
<style> .opaque { opacity: 0.5; } </style> <div class="parent opaque"> <div class="child opaque"> (゚Д゚)ゴルァ!! </div> </div>
とすると、div.childは0.5 * 0.5 = 0.25の透明度になるわけです。
それじゃ困る!という時は次のようにします。
<style> .opaque { opacity: 0.5; } .opaque.child { opacity: 1; } /style> <div class="parent opaque"> <div class="child opaque"> (゚Д゚)ゴルァ!! </div> </div>
.childの透明度を1に戻して、親要素の透明度だけを適用するわけです。
もっとスマートにやるなら、
<style> .opaque { opacity: 0.5; } /* opaqueの入れ子をキャンセル */ .opaque .opaque { opacity: 1; } /style> <div class="opaque"> <div class="opaque"> (゚Д゚)ゴルァ!! </div> </div>
でもOK。