スポンサード

CSS の opacity プロパティで透明度を調整できますが、

「背景を透明度50%にしたい」

と思って opacity を使うと、背景だけでなくその上に載っているテキストや画像まで透明度が落ちてしまいます。(´・ω・｀)

「背景だけ透明度を落としたいんだよ!!」

という場合は、CSSファイルで opacity ではなく RGBa を利用します。

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

Opacity を使うと

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

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

RGBA で透明度50%の設定

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

CSSファイルへの記述例は、こんな感じです。

RGBA カラーモデルの設定値

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

スポンサード