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

WEB制作

【CSS】文字はくっきり、背景だけ透過させる opacityとrgbaを使い分けよう

スポンサーリンク

透明

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に近いほど透明になっていきます。

まとめ

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

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



スポンサーリンク

-WEB制作
-, , , , ,

© 2023 WEBセンス Powered by AFFINGER5