contrast()

**contrast()** CSS 函数 调整输入图片的对比度。其结果是一个 <filter-function>

试一试

语法

css
contrast(amount)

amount

结果的对比度,指定为一个 <number> 或一个 <percentage>。小于 100% 的值会降低对比度,而大于 100% 的值会提高对比度。00% 的值会创建一个完全灰色的图片,而 1100% 的值不会改变输入。不允许负值。用于 插值 的初始值为 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%)

正式语法

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

示例

使用 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 表格仅在浏览器中加载

另请参阅