CSS

CSS’s opacity is a property that uses a value between 0.0 and 1.0 to specify the overall transparency of an element, including its child elements, controlling how see-through it appears.

opacity

　opacityは、要素の不透明度（透過度）を指定するプロパティです。画面に要素がどの程度 “透けて” 表示されるかを制御するもので、値としては 0.1 ～ 1.0 の数値を用います。0.0 は完全に透明、1.0 は完全に不透明を意味し、たとえば 0.5 であれば半透明として表示されます。

　opacityプロパティで1.0未満の数値を指定した際には、透明効果がオブジェクト全体に均一に適用されます。 コンテナ要素に指定した場合には、その内容にも透明効果が適用されて背景と混合したような表示となります。

　透明効果をオブジェクト全体ではなく、背景色やボーダー色に個別に適用したい場合には、rgba()で指定することができます。

基本的な使い方

CSS

.example {
	opacity: 0.5;  /* 半透明表示 */
}

子要素への影響

　opacity は親要素だけではなく、その要素のすべての子要素に対して透過を適用します。

HTML

<div class="parent" style="opacity: 0.5;">
	<p>親要素の子要素</p>
</div>

　このように指定すると、p 要素も半透明になります。部分的に特定の要素だけ透過をさせたい場合は、子要素のほうではなく、背景色や画像の透過を考慮した別のアプローチ（背景を rgba() で指定する、など）を使うことが多いです。

opacity と rgba() の違い

opacity
rgba() ( background-color: rgba(255, 0, 0, 0.5) など)

　たとえばボックス全体をふんわり透けさせたいときは opacity が手軽ですが、背景色だけを半透明にしたい場合は rgba() や hsla()、もしくは alpha チャンネルつきのカラー指定が便利です。

Browser support

Data on support for the mdn-css__properties__opacity feature across the major browsers from caniuse.com

　CSS の opacity は、現在では主要なモダンブラウザで幅広くサポートされています。過去の古いバージョンの IE では filter: alpha(opacity=50); のような独自表記が必要でしたが、最近では気にしなくてもよいケースがほとんどです。

アニメーションへの活用

　opacity は数値が 0.0～1.0 の間で変化するため、CSS アニメーションやトランジションで扱いやすいプロパティのひとつです。

CSS

.fade-in {
	animation: fade-in 2s ease-in-out forwards;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

　このように、フェードインやフェードアウトなどのアニメーションを簡単に実現できます。

パフォーマンスや注意点

再描画コスト
重ね合わせの順序 (z-index との関係)

filter: opacity() との違い

　CSS には filter: opacity(50%); のように書く方法もあります。これは主に画像のフィルターとして利用することが多く、最新のブラウザであればテキストにも適用できます。

CSS

.filter-example {
	filter: opacity(50%);
}