brightness()
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.
brightness() は CSS の関数で、入力画像に線形乗算を適用し、明るくしたり暗くしたりします。その結果は <filter-function> です。
試してみましょう
構文
css
brightness(amount)
引数
amount-
結果の明るさで、
<number>または<percentage>で指定します。100%未満の値では画像が暗くなり、100%を超える値では画像が明るくなります。0%の値では画像が完全に黒くなり、100%の値では入力が変更されないままになります。補間時の欠損値は1です。
例
数値とパーセント値を用いた brightness の設定
css
>brightness(0%) /* 完全に黒 */
brightness(0.4) /* 明るさ 40% */
brightness(1) /* 効果なし */
brightness(200%) /* 明るさ 2 倍 */
仕様書
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-brightness |
ブラウザーの互換性
BCD tables only load in the browser