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>.

尝试一下

filter: brightness(1);

filter: brightness(1.75);

filter: brightness(50%);

filter: brightness(0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

语法

brightness(amount)

值

amount: 输出的亮度值取决于<number>或<percentage>的大小。低于100% 的值会使图片变暗，超过100%的值将会使其变亮。当值为0%时将会创建一个全黑的图像，当值为100%时不会有任何变化。该值为空时默认为1.

例子

css

brightness(0%)   /* 全黑 */
brightness(0.4)  /* 40% 亮度 */
brightness(1)    /* 无效果 */
brightness(200%) /* 两倍亮度 */

参见

<filter-function>