contrast()

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.

contrast()CSS関数で、入力画像のコントラストを調整します。結果は <filter-function> です。

試してみましょう

構文

css
contrast(amount)

引数

amount

結果のコントラストで、 <number> または <percentage> で指定します。 100% 未満の値ではコントラストが下がり、 100% を超える値ではコントラストが上がります。 0% の値では画像が完全に灰色になり、 100% の値では入力が変更されないままになります。補間時の欠損値は 1 です。

数値とパーセント値を使用した contrast の設定

css
contrast(0)     /* 完全な灰色 */
contrast(65%)   /* 65% のコントラスト */
contrast(1)     /* 効果なし */
contrast(200%)  /* 2 倍のコントラスト */

仕様書

Specification
Filter Effects Module Level 1
# funcdef-filter-contrast

ブラウザーの互換性

BCD tables only load in the browser

関連情報