透明を表現する「opacity」 と 「RGBa」の使い分け方【CSS】

   

透明というと、ずっとopacityかと思っていたのですが、
RGBaというのもあるのを最近知りましたw

rgba()は、RGBAカラーモデルで色を指定する際に使用します。
RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったものです。 alphaは色の透明度を表します。

こちらより引用させていただきました。

対応ブラウザ

Can I useというサイトで調べられます。
IEは9から対応しているみたいなので
使っても問題なさそうです。

RGBa

Chromeを見ると相当前から実装OKになってますねw

opacityとRGBaの使い方

opacity

透明度を1〜0の間で設定。

濃い(1)ーーーーーーー薄いーーーーーー消える(0)

こんな感じでしょうか。
こちらはプロパティ。

それで、以前はまったのが、

背景だけ透明にしたかったのに、上に乗っている文字も
一緒に透明になってしまったことでした。

そのときはなんでかわからず、画像で対処しました・・・

RGBa

こちらも透明度を1〜0の間で設定。

濃い(1)ーーーーーーー薄いーーーーーー消える(0)

背景だけ透明にすることができます。
こちらはプロパティの値。

まとめ

背景だけだったら、RGBa
全体を透明にしたかったら、opacityを使う!

知らないことがまだたくさん・・

 - web