saturate()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
saturate() は CSS の関数で、入力画像の彩度を上げたり下げたりします。結果は <filter-function> です。
試してみましょう
構文
css
saturate(amount)
引数
amount-
変換の量で、
<number>または<percentage>で指定します。100%未満の値では彩度を下げ、100%を超える値では彩度を上げます。0%の値では画像が完全に彩度がなくなり、100%の値では入力が変更されないままになります。補間時の欠損値は1です。
例
saturate() の正しい値の例
css
saturate(0) /* 彩度なし */
saturate(.4) /* 彩度 40% */
saturate(100%) /* 効果なし */
saturate(200%) /* 2 倍の彩度 */
仕様書
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-saturate |
ブラウザーの互換性
BCD tables only load in the browser