重複したopacityを統一化

何か入れ子の要素があった時、親要素と子要素で同一のスタイルを当てていて、それが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。