このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

brightness()”関数CSS3で追加

記事Jul.27th,2021
入力画像の明度を変更するCSSの関数、“brightness()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

brightness()”関数

brightness()”関数は入力画像にリニア乗算を行って明るくしたり、暗くしたりする関数です。

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

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

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

0%”で完全な黒い画像、“100%”で入力画像と同じ画像、“100%”より大きい場合は入力画像よりも明るい画像を出力します。負の値は無効です。

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

使用例

.filter-0 { filter: brightness(0%);}
.filter-2 { filter: brightness(20%);}
.filter-4 { filter: brightness(40%);}
.filter-6 { filter: brightness(60%);}
.filter-8 { filter: brightness(80%);}
.filter-10 { filter: brightness(100%);}
.filter-12 { filter: brightness(120%);}
.filter-14 { filter: brightness(140%);}
.filter-16 { filter: brightness(160%);}
.filter-18 { filter: brightness(180%);}
.filter-20 { filter: brightness(200%);}
.filter-22 { filter: brightness(220%);}
brightness(0%)
brightness(20%)
brightness(40%)
brightness(60%)
brightness(80%)
brightness(100%)
brightness(120%)
brightness(140%)
brightness(160%)
brightness(180%)
brightness(200%)
brightness(220%)

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
brightness()
定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク