CSS3の定義で透過設定をするも、透過されたくない中身のテキストまで影響が及ぶのを防ぐ件

CSSの定義では、画像や塗りつぶしの背景色など、様々な透過指定が可能となりました。

以前のCSSでは透過の設定は結構大変でしたね！ｗ

また、ブラウザ側の対応もCSS3の普及に大きく貢献しました。

と言うことで、今回はその便利な透過の設定なんですが、ご経験者であれば「うんうん、あるある！（爆）」と爆笑すれば良いのですが初めて遭遇すると笑い事ではありません！

透過の設定自体は、基本[opacity:]を使ってこんな感じで書きます。

#hogehoge {
 opacity:0.7;
 -webkit-opacity:0.7;
 -moz-opacity:opacity:0.7;
 filter:alpha(opacity=70); /* IE8以下 */
 background-color:#fff;
}

すみません、opacityの対応状況がいまいちなので、頭の-webkit-と-moz-（ベンダープレフィックス）の必要性は？な部分がありますのでご了承ください！ｗ

まあ、これでこの#hogehoge部分は背景の白(#fff)が透過され、うっすら後ろに画像などあれば見える感じですね。

しかし、ここで問題なんです！

こもまま、中にコンテンツを配置してしまうと…。


↑分かりにくいですが、中の「なんじゃこりゃ～！」が透過されて文字色が微妙に薄いですよね？

なんじゃこりゃ～！

といった具合に、中身までもが透過されてしまうんです。

これだと文章が読みにくいですね！

そこで、中にコンテンツを置く場合には「opacity」では無く、「rgba」の指定を行います。

{
background-color:rgba(255,255,255,0.7);
}

RGBAとは、色を赤(R)緑(G)青(B)の三原色と、更にプラスで透明度(A)にて表現したものです。


Photshopとかでカラーピッカー立ち上げると16進数のカラーコードと合わせてRGBも表示されますよね。

また、いちいち面倒な方はWEBから16進数カラーコードを入力するとRGBに変換してくれるサービスがあるので、こういったものを利用してみるもの良いでしょう！

16進数カラーコードをRGBに変換してくれるサービス！


後は、透明度(A)の部分を希望の透過に設定すればOKです。

ちなみに、Aのalpha値は0～1で定義します。(0.5とか…)

このように「RGBA」で定義したほうは、中のコンテンツは透過されずにはっきりと表示されています。

「opacity」で中身が透過され禿げそうな位に悩んだ方は、是非「RGBA」にて定義してみてください！ｗｗ

小さな会社のWeb担当者のための HTML5/CSS3とWeb技術の常識 著：H2O SPACE