Jul.27th,2021
＃
“saturate()”関数
“saturate()”関数は入力画像を彩度を変更するための関数です。
“<filter-function>”値として使用することができ、“filter”プロパティで要素を彩度を変更することができます。
引数は1個の“<number-percentage>”値で、“0”は“0%”、“1”は“100%”に対応します。
saturate(〚“<number-percentage>”値〛)
引数は彩度を表し、“0%”で無彩色、“100%”で入力画像と同じ画像、“100%”より大きい場合は彩度がより強い画像を出力します。
省略時の既定値は“1”です。また、補間時の初期値は“1”です。
＃
使用例
.filter-0 { filter: saturate(0%);}
.filter-2 { filter: saturate(20%);}
.filter-4 { filter: saturate(40%);}
.filter-6 { filter: saturate(60%);}
.filter-8 { filter: saturate(80%);}
.filter-10 { filter: saturate(100%);}
.filter-12 { filter: saturate(120%);}
.filter-14 { filter: saturate(140%);}
.filter-16 { filter: saturate(160%);}
.filter-18 { filter: saturate(180%);}
.filter-20 { filter: saturate(200%);}
.filter-22 { filter: saturate(220%);}
saturate(0%)
saturate(20%)
saturate(40%)
saturate(60%)
saturate(80%)
saturate(100%)
saturate(120%)
saturate(140%)
saturate(160%)
saturate(180%)
saturate(200%)
saturate(220%)
＃
