【透明】opacity の使い方

opacityとは？

要素の透明度を指定したい時に使うcssのプロパティです。

背景を少し透明にしたい…

ボタンのホバー時に少し透明にしてメリハリをつけたい…など

まずはこのような四角形があります。

opacityを指定する前です。

opacity: 0.5;を指定してみます。

画像内の白い四角形内に対して指定みます。

すると

このように白い四角形と「テキスト」の文字が透過されています。

（※四角形だけ透過させてテキストは透過させたくない時などは、四角形の背景色を(rgba)で指定するやり方もいいかと思います。）

今まで制作してきた中では、ボタンや画像のホバー時に使うことが多々ありました。