透明度 opacity とカラー指定 rgba

CSSで opacity での指定と rgba での指定の違い

opacity、rgba は共に要素を透明にすることができるCSS3のプロパティです。どちらも透明になるのですが、opacityを指定した要素は全てが同様に透けてしまいます。指定は簡単ですが、文字や写真は透けずに背景色だけ透過にしたい…。そのような場合はカラー指定をrgbaで行うと解決できます。opacityを指定したときとrgbaで指定したときの違いが分かりますか？

透明度を opacity で指定した場合

opacityが指定された要素は透明になります。
div {opacity:0.8;} 上記のように指定した場合は、不透明度が80%ということです。数字が0に近づくほど透明度が高くなり透けて見えます。指定された要素は文字色、背景色、画像、ボーダー等、全てが同様に透過するのが特徴です。
左の写真や上のグレーの帯は、背景が透けて見えるでしょう。

カラーを rgba で指定した場合

下記のように透過させたい要素のカラープロパティに
rgba(Rの数値, Gの数値, Bの数値, アルファ値) と指定します。
div {background-color: rgba(255, 255, 255, 0.8);} opacityと同様に、アルファ値の数字が0に近いほど透明度が高くなり、透けて見えます。
左の写真や上のグレーの帯は、透けていませんので背景は見えません。