opacityが指定された要素は透明になります。
上記のように指定した場合は、不透明度が80%ということです。数字が0に近づくほど透明度が高くなり透けて見えます。指定された要素は文字色、背景色、画像、ボーダー等、全てが同様に透過するのが特徴です。
左の写真や上のグレーの帯は、背景が透けて見えるでしょう。
opacityが指定された要素は透明になります。
上記のように指定した場合は、不透明度が80%ということです。数字が0に近づくほど透明度が高くなり透けて見えます。指定された要素は文字色、背景色、画像、ボーダー等、全てが同様に透過するのが特徴です。
左の写真や上のグレーの帯は、背景が透けて見えるでしょう。
opacityを指定した要素は全てが同様に透けてしまいますが、文字や写真は透けずに背景色だけ透過にしたい…。
そのような場面はカラー指定をrgbaで行うと解決できます。opacityを指定したときとrgbaで指定したときの違いが分かりますか？
下記のように透過させたい要素のカラープロパティに
rgba(Rの数値, Gの数値, Bの数値, アルファ値) と指定します。
opacityと同様に、アルファ値の数字が0に近いほど透明度が高くなり、透けて見えます。
左の写真や上のグレーの帯は、透けていませんので背景は見えません。