brightness()

**brightness()** CSS <filter-function> 对元素或输入图像应用线性乘数值,使图像看起来更亮或更暗。

试一试

语法

css
brightness(amount)

amount

指定为 <number><percentage> 的亮度。小于 100% 的值会使输入图像或元素变暗,而大于 100% 的值会使图像或元素变亮。值 0% 会创建完全黑色的图像或元素,而值 100% 会使输入保持不变。0%100% 之间其他值具有线性乘数效果。允许使用大于 100% 的值,从而提供更亮的结果。插值 的初始值为 1。不允许使用负值。当未指定任何内容时,默认值为 1

以下是等效值的配对

css
brightness(0) /* Brightness is reduced to zero, so input turns black */
brightness(0%)

brightness(0.4) /* Brightness of input is reduced to 40%, so input is 60% darker */
brightness(40%)

brightness(1) /* Brightness of input is not changed */
brightness(100%)

brightness(2) /* Brightness of input is doubled */
brightness(200%)

正式语法

<brightness()> = 
brightness( [ <number> | <percentage> ]? )

示例

使用 backdrop-filter 属性应用亮度

此示例演示如何通过 backdrop-filter CSS 属性将 brightness() 过滤器应用于段落。

CSS

css
.container {
  background: url(image.jpg) no-repeat right / contain #d4d5b2;
}
p {
  backdrop-filter: brightness(150%);
  text-shadow: 2px 2px #ffffff;
}

结果

在这个示例中,<p> 元素后面区域的颜色线性变化。如果将 backdrop-filter 属性设置为 brightness(0%),则包含 <p> 元素的 <div> 区域将变成黑色并隐藏后面的图像。当 brightness(100%) 时,<div> 区域的颜色将与输入的 #d4d5b2 相同,并且后面的图像将完全透明。在本示例中,将亮度设置为 150% 时,后面图像中的颜色会被 <div> 元素的亮度所遮盖。

使用 filter 属性应用亮度

在这个示例中,brightness() 过滤器应用于整个元素,包括内容、边框和背景图像,通过 filter CSS 属性实现。结果显示了三种不同亮度值的变体。

css
p:first-of-type {
  filter: brightness(50%);
}
p:last-of-type {
  filter: brightness(200%);
}

使用 url() SVG 亮度过滤器应用亮度

SVG <filter> 元素用于定义自定义滤镜效果,然后可以通过 id 进行引用。<filter> 元素的 <feComponentTransfer> 原语能够实现像素级的颜色重新映射。

在这个示例中,为了创建一个将应用于其上的内容暗化 25%(即原始亮度的 75%)的过滤器,将 slope 属性设置为 0.75。然后,我们可以通过 id 引用该过滤器。

给定以下内容

html
<svg role="none">
  <filter id="darken25" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="linear" slope="0.75" />
      <feFuncG type="linear" slope="0.75" />
      <feFuncB type="linear" slope="0.75" />
    </feComponentTransfer>
  </filter>
</svg>

以下声明产生类似的效果

css
filter: brightness(75%);
filter: url(#darken25); /* with embedded SVG */
filter: url(folder/fileName.svg#darken25); /* external svg filter definition */

在下图中,第一个图像应用了 brightness() 过滤器函数,第二个图像应用了类似的 SVG 亮度函数,第三个图像为原始图像,用于比较。

规范

规范
过滤器效果模块级别 1
# funcdef-filter-brightness

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅