“opacity()”関数

“opacity()”関数

“opacity()”関数は入力画像の透明度を変更するための関数です。

“<filter-function>”値として使用することができ、“filter”プロパティで要素の透明度を変更することができます。

引数は1個の“<number-percentage>”値で、“0”は“0%”、“1”は“100%”に対応します。

opacity(〚“<number-percentage>”値〛)


引数は不透明度を表し、“0%”で完全に透明な画像、“100%”で入力画像と同じ画像を出力します。“100%”より大きい引数も有効ですが、“100%”に丸められます。負の値は無効です。

省略時の既定値は“1”です。また、補間時の初期値は“1”です。

使用例

.filter-0 { filter: opacity(0%);}
.filter-2 { filter: opacity(20%);}
.filter-4 { filter: opacity(40%);}
.filter-6 { filter: opacity(60%);}
.filter-8 { filter: opacity(80%);}
.filter-10 { filter: opacity(100%);}


opacity(0%)

opacity(20%)

opacity(40%)

opacity(60%)

opacity(80%)

opacity(100%)

仕様書

定義されている仕様書

opacity()