

#
“grayscale()”関数
“grayscale()”関数は入力画像をグレースケールに変換するための関数です。
“<filter-function>”値として使用することができ、“filter”プロパティで要素をグレースケールに変換することができます。
引数は1個の“<number-percentage>”値で、“0”は“0%”、“1”は“100%”に対応します。
grayscale(〚“<number-percentage>”値〛)
引数は変換の比率を表し、“0%”で入力画像と同じ画像、“100%”で完全なグレースケールの画像を出力します。“100%”より大きい引数も有効ですが、“100%”に丸められます。負の値は無効です。
省略時の既定値は“1”です。また、補間時の初期値は“0”です。
#
使用例
.filter-0 { filter: grayscale(0%);}
.filter-2 { filter: grayscale(20%);}
.filter-4 { filter: grayscale(40%);}
.filter-6 { filter: grayscale(60%);}
.filter-8 { filter: grayscale(80%);}
.filter-10 { filter: grayscale(100%);}
grayscale(0%)

grayscale(20%)

grayscale(40%)

grayscale(60%)

grayscale(80%)

grayscale(100%)

#