opacityは、セレクタ全体の透明度を設定することができます。 rgbaは、カラーの設定(Red/Green/blueの組み合わせで色を表現する)と、 色の透明度を表すa(alpha)が加わったものです。 背景だけ透過させ、文字はそのまま表示させたいときは、rgbaを使いましょう。

WEB制作

【CSS】背景だけ透過させるならrgbaを使おう opacityとの違いを理解する

スポンサーリンク

透明

CSSにだいぶ慣れてきて、opacityもパッと思い浮かぶようになってきたところ。

 

あれ、透過させる要素は背景だけでいいのに・・・・。

文字は透過させずくっきりさせたいけど、一体どうしたら・・・・。

とお困りの方はぜひ参考にしてください。

 

今回は、opacityとrgbaの使い分け です。

opacityとは

opacityは、セレクタ全体の透明度を設定することができます。

ですので、設定した要素に含まれる文字も一緒に透過させてしまいます。

 

 

rgbaとは

rgbaは、カラーの設定(Red/Green/blueの組み合わせで色を表現する)と、色の透明度を表すa(alpha)が加わったものです。

 

opacityがセレクタ全体の透明度を指定をするのに対して、rgbaは背景色や文字色をピンポイントで変更することができます。

 

#要素 {
background:rgba(51,112,121,0.4);
}

この「0.4」のところが透過数値です。

0から1までの数値で表記し、0に近いほど透明になっていきます。

 

下のサンプルで違いを確認しましょう。

See the Pen
rgba
by t.h (@tomtom15)
on CodePen.

 

まとめ

いかがでしたでしょうか。

opacityしか知らないとハマってしまいます。

 

背景だけ透過させ、文字はそのまま表示させたいときは、rgba を使いましょう。

詳しく知りたい方はこちらもどうぞ。
opacityとrgba

 

文字を目立たせるシリーズ。こちらの記事も参考にどうぞ。


スポンサーリンク

-WEB制作
-, , , ,

© 2024 人生フリーハンド Powered by AFFINGER5