opacityで要素の透明度を指定する【CSS】

opacityは要素の透明度を指定するプロパティです。

opacityプロパティの値には0.0〜1.0までの数値を指定して透明度を表します。

0を指定すると完全な透明になり、1を指定すると完全な不透明になります。

試しにopacityプロパティを使って背景色の透明度を表すとします。

下の例は上のように指定しているのですが、opacityプロパティによる指定がdiv全体に効いているのでテキストも薄くなっているのがわかります。

背景色だけ薄くしたいときはopacityプロパティではなく、「rgba」という色の指定方法を使うのがいいと思います。

このように指定すると、テキストは薄くならず、背景色の赤だけが薄くなっています。

rgbaの指定では、赤（Red）・緑（Green）・青（Blue）の3つの値を組み合わせ、それらの値に続けて透明度も指定できるんです。

色の指定方法に関しては、『CSSの色の指定方法まとめ！RGBモデルやHSLモデル【CSS】』の記事をご覧ください。