contrast()
**contrast()
** CSS 函数 调整输入图片的对比度。其结果是一个 <filter-function>
。
试一试
语法
css
contrast(amount)
值
amount
-
结果的对比度,指定为一个
<number>
或一个<percentage>
。小于100%
的值会降低对比度,而大于100%
的值会提高对比度。0
或0%
的值会创建一个完全灰色的图片,而1
或100%
的值不会改变输入。不允许负值。用于 插值 的初始值为1
。
以下是等效值的配对
css
contrast(0) /* Completely gray */
contrast(0%)
contrast(0.65) /* 65% contrast */
contrast(65%)
contrast(1) /* No effect */
contrast(100%)
contrast(2) /* Double contrast */
contrast(200%)
正式语法
示例
使用 backdrop-filter 属性
此示例通过 backdrop-filter
CSS 属性将 contrast()
过滤器应用于段落和等宽文本,颜色偏移到 <p>
和 <code>
后面的区域。
css
.container {
background: url(image.jpg) no-repeat center / contain #339;
}
p {
backdrop-filter: contrast(0.5);
}
code {
backdrop-filter: contrast(0.15);
}
使用 filter 属性
此示例通过 filter
CSS 属性应用 contrast()
过滤器,通过改变整个元素(包括内容、边框、背景和阴影)的颜色来改变对比度。
css
p:first-of-type {
filter: contrast(30%);
}
p:last-of-type {
filter: contrast(300%);
}
使用 url() 和 SVG 对比度过滤器
SVG <filter>
元素用于定义自定义过滤器效果,然后可以通过 id
进行引用。<filter>
的 <feComponentTransfer>
原语支持像素级别的颜色重映射。鉴于以下内容
svg
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="2" intercept="-0.5"/>
<feFuncG type="linear" slope="2" intercept="-0.5"/>
<feFuncB type="linear" slope="2" intercept="-0.5"/>
</feComponentTransfer>
</filter>
这些值产生相同的结果
css
filter: contrast(200%);
filter: url(#contrast); /* with embedded SVG */
filter: url(folder/fileName.svg#contrast); /* external svg filter definition */
此示例显示了三张图片:应用了 contrast()
过滤器函数的图片、应用了等效 url()
过滤器的图片以及用于比较的原始图片。
规范
规范 |
---|
过滤器效果模块级别 1 # funcdef-filter-contrast |
浏览器兼容性
BCD 表格仅在浏览器中加载