CSSにだいぶ慣れてきて、opacityもパッと思い浮かぶようになってきたところ。
あれ、透過させる要素は背景だけでいいのに・・・・。
文字は透過させずくっきりさせたいけど、一体どうしたら・・・・。
とお困りの方はぜひ参考にしてください。
今回は、opacityとrgbaの使い分け です。
opacityとは
opacityは、セレクタ全体の透明度を設定することができます。
ですので、設定した要素に含まれる文字も一緒に透過させてしまいます。
rgbaとは
rgbaは、カラーの設定（Red/Green/blueの組み合わせで色を表現する）と、色の透明度を表すa(alpha)が加わったものです。
opacityがセレクタ全体の透明度を指定をするのに対して、rgbaは背景色や文字色をピンポイントで変更することができます。
#要素 {
background:rgba(51,112,121,0.4);
}
この「0.4」のところが透過数値です。
０から１までの数値で表記し、０に近いほど透明になっていきます。
下のサンプルで違いを確認しましょう。
See the Pen
rgba by t.h (@tomtom15)
on CodePen.
まとめ
いかがでしたでしょうか。
opacityしか知らないとハマってしまいます。
背景だけ透過させ、文字はそのまま表示させたいときは、rgba を使いましょう。
詳しく知りたい方はこちらもどうぞ。
opacityとrgba
文字を目立たせるシリーズ。こちらの記事も参考にどうぞ。
