背景にopacityをかけて透過させたいけどその上に配置する要素は透過させたくない、こんなシーン結構あるはず。
See the Pen opacity-sample by ririli (@ririli) on CodePen.
サンプルのid=background1は失敗して上に配置する子要素まで透過してしまってます。
opacity-cancelというidでpタグだけなんとかopacityをなかったことにしようとしていますがうまくいっていませんね。
なんでうまくいかんの？
実はopacityプロパティは該当の要素の子要素全てにopacityを適用させてしまいます。
これだけならcolorなんかと同じですが、決定的な違いがあります。
実は子要素にとってのopacity1=親要素のopacity設定値になってしまうのです。
そのため、子要素側でopacityをunsetにしてもopacity1の状態がそもそも薄くなってしまっているので効果がないわけです。
どうすればいいわけ？
opacityの代わりにrgbaで透明度を操作します。
これがサンプルのid=background2のパターンです。
元のbackground-corolo:#aaaaaaを変換して全て170に、opacityに設定していた0.3をAlphaにします。
これによって透明度の情報はこの要素のみに適用され、子要素は何も影響を受けません。