親要素ブロックを半透明、子要素ブロックを不透明にする | UCWD-Studioほんの最近まで携わっていた案件でサイトデザイン案のHTMLコーディングした際に遭遇した事例ですが、要は図1のような表示結果を図2のように親要素を半透明にしつつ、その子要素ブロックは不透明にしたいというケースの対応策です。 図の場合はサンプルなので簡単な構成ですが、 背景に何かしらの画像を background に設定してて、 コンテンツ領域の縁を半透明にしつつ、 コンテンツ領域は不透明にして内容の可読性を確保したい といったケースが想定されます。Webデザインとしては比較的レアなケースですが。 【対応策その1】filter プロパティの利用 CSSだけで対応しようとする際、真っ先に思い浮かぶのが filter プロパティの利用ですが、工夫しないと上手く対応できません。例えばHTMLが <div id="parentBlock"> <div id="childBlock"></div> </
