opacity：要素の不透明度を指定する

opacityプロパティの説明

opacityは、要素の不透明度を指定します。不透明度は要素の裏側に重なったコンテンツの隠れる度合いで、透明度の逆です。

コンピューターで画像の透過具合を表す祭にアルファチャネルという表現を使います。アルファチャネルを使うと、RGBやCMYKなどの色空間に透明度を足すことが可能となり、opacityも同じ表現を使います。

不透明度は1が完全であり、0に近づくほど透過具合が増します。例えば、重なった要素の手前に不透明度0.5を指定すると半透明となり、背後の色調を透過して表示します。

opacityの値は継承しませんが、要素全体の不透明度を決定するため、親要素に含まれる内容は全て同じ透過具合が適用されます。

opacityに指定できる値

<alpha-value>

アルファチャネルを表す値です。0.0以上、1.0以下の<number>値、または0%以上、100%以下の<percentage>値を使用します。

opacityの使い方とサンプル

opacityプロパティの構文は以下の通りです。

/* <alpha-value>値 */
opacity: 1;
opacity: 0.5;
opacity: 0;
opacity: 100%;
opacity: 50%;
opacity: 0%;

/* グローバル値 */
opacity: inherit;
opacity: initial;
opacity: revert;
opacity: unset;

opacityの実例

それでは実際にopacityプロパティの書き方を見ていきましょう。以下の例は、背景画像を敷いた要素の上に別の背景色を指定した要素を重ねて、不透明度を変化させた時の比較です。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > div {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background: url(../images/sample_photo_1200x630.jpg) center no-repeat;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: 1rem;
	background: #ffc;
	font-size: 1.3rem;
	font-weight: bold;
}
#op_1 {
	opacity: 1;
}
#op_2 {
	opacity: 0.7;
}
#op_3 {
	opacity: 0.5;
}

<div class="samp_box">
	<div>
		<p id="op_1">opacity: 1;</p>
		<p id="op_2">opacity: 0.7;</p>
		<p id="op_3">opacity: 0.5;</p>
	</div>
</div>

不透明度を動的な要素に使用する

ユーザーの操作に反応して動的な効果を演出する方法です。以下の例では、マウス操作に応じて不透明度が変わる要素を用意し、背景が見え隠れする効果を試します。画像の上にマウスポインタを乗せると半透明になり、クリックすると更に不透明度が下がります。実際の場面では画像を完全に隠したり、不透明度を0にするなどの設定が効果的です。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > div {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background: url(../images/sample_photo_1200x630.jpg) center no-repeat;
}
.samp_box img {
	width: 100%;
	height: 200px;
	margin: 1rem 0 0;
	border: 1px solid #333;
	background-color: #fff;
	object-fit: none;
	object-position: center center;
	cursor: pointer;
}
.samp_box img:hover {
	opacity: 75%;
}
.samp_box img:active {
	opacity: 25%;
}

<div class="samp_box">
	<div>
		<img src="../images/sample_square_200.png" alt="サンプル画像">
	</div>
</div>