[CSS]OpacityではなくRGBaで透過を指定することで文字の透過を防ぐ

CSSのopacityプロパティで透明度を調整できますが、「背景を透明度50%にしたい」と思ってopacityを使うと、背景だけでなくその上に載っているテキストや画像まで透明度が落ちてしまいます。(´・ω・｀)

背景だけ透明度を低くしたい場合

opacityではなくRGBaを利用します。

が、注意点としてRGBaはCSS3のプロパティなので、IE下位バージョンには使えません。

Opacityを使うと？

ちなみに、透明度の設定にopacityを使うと↓こんな感じです。

これだと「背景だけ」に限定して透過させることはできません。

RGBAで透明度50%の設定

そこでCSS3のRGBaプロパティを利用して透明度を調整してあげます。

CSSファイルへの記述は以下のように行います。

RGBAカラーモデルの設定値

RGBAカラーモデルを使う場合は、それぞれ以下の値をカンマで区切って利用します。