スタイルシートのopacityプロパティは、要素の不透明度を指定する。

書式

opacity: value

valueには、要素の不透明度を次の表に示すいずれかの値で指定する。

opacityプロパティの値
説明
number 0.0(完全に透明)から1.0(完全に不透明)の数値
initial デフォルト値(1.0)
inherit 親要素のopacityプロパティを継承する

プロパティ詳細

デフォルト値 1.0
適用対象 すべての要素
継承 しない
アニメーションの可否 可能
バージョン CSS3
JavaScript object.style.opacity

使用例

opacityに0.0を指定すると、完全に透明になる。

<img src="image.png" style="opacity: 0.0;">

<img src="image.png" style="opacity: 0.2;">

<img src="image.png" style="opacity: 0.5;">

<img src="image.png" style="opacity: 0.8;">

opacityに1.0を指定すると、完全に不透明になる。

<img src="image.png" style="opacity: 1.0;">