プログラミング

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

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

{opacity: 透明度;}

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

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

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

<div style=”width:250px;height:100px;background:red;opacity:0.5;”>
赤色にopacityプロパティで透明度0.5を指定しています。
</div>

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

赤色にopacityプロパティで透明度0.5を指定しています。

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

<div style=”width:250px;height:100px;background:rgba(255,0,0,0.5);”>
赤色にopacityプロパティで透明度0.5を指定しています。
</div>

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

rgbaで赤色・透明度0.5を指定しています。

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

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

Leave a Comment