親要素ブロックを半透明、子要素ブロックを不透明にする | UCWD-Studio
ほんの最近まで携わっていた案件でサイトデザイン案のHTMLコーディングした際に遭遇した事例ですが、要は図1のような表示結果を図2のように親要素を半透明にしつつ、その子要素ブロックは不透明にしたいというケースの対応策です。 図の場合はサンプルなので簡単な構成ですが、 背景に何かしらの画像を background に設定してて、 コンテンツ領域の縁を半透明にしつつ、 コンテンツ領域は不透明にして内容の可読性を確保したい といったケースが想定されます。Webデザインとしては比較的レアなケースですが。 【対応策その1】filter プロパティの利用 CSSだけで対応しようとする際、真っ先に思い浮かぶのが filter プロパティの利用ですが、工夫しないと上手く対応できません。例えばHTMLが <div id="parentBlock"> <div id="childBlock"></div> </
透明度を表す「opacity」 と 「RGBa」の違いと使い分け
ともに透明度を表す「opacity」 と 「RGBa」ですが、違いをちゃんと理解して正しい使い分けをしましょう。 対応しているブラウザ ともにCSS3ですのでブラウザによってサポートしているもの、サポートしていないものがあります。 と言ってもIE以外は問題なく対応できています。IEについてはIE9から対応するようになりました。Firefox、Chrome、Safari、Operaなどはかなり前のバージョンから対応できています。 opacityとRGBaの仕組みについて まずは、それぞれの仕組みを説明します。 opacityの仕組み opacityは不透明を表し、値には0～1の間で「0.5」「0.555」などと指定します。 RGBaの仕組み RGBaは、RGBカラーモデルのred・green・blueに、alphaが加わったもので、alphaは色の透明度を表します。 opacityとRGBa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
