brightness()
**brightness()
** CSS <filter-function>
对元素或输入图像应用线性乘数值,使图像看起来更亮或更暗。
试一试
语法
brightness(amount)
值
amount
-
指定为
<number>
或<percentage>
的亮度。小于100%
的值会使输入图像或元素变暗,而大于100%
的值会使图像或元素变亮。值0%
会创建完全黑色的图像或元素,而值100%
会使输入保持不变。0%
到100%
之间其他值具有线性乘数效果。允许使用大于100%
的值,从而提供更亮的结果。插值 的初始值为1
。不允许使用负值。当未指定任何内容时,默认值为1
。
以下是等效值的配对
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%)
正式语法
示例
使用 backdrop-filter 属性应用亮度
此示例演示如何通过 backdrop-filter
CSS 属性将 brightness()
过滤器应用于段落。
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 属性实现。结果显示了三种不同亮度值的变体。
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
引用该过滤器。
给定以下内容
<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>
以下声明产生类似的效果
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 的浏览器中加载。