filter: contrast()

用于对元素应用对比度滤镜的实用工具。

类样式

contrast-<number>

filter: contrast(<number>%);

contrast-(<自定义属性>)

filter: contrast(var(<自定义属性>));

contrast-[<value>]

filter: contrast(<value>);

示例

使用类似 contrast-50 和 contrast-100 的实用程序来控制元素的对比度

使用 对比度-[<value>] 语法来设置对比度基于完全自定义的值

<img class="contrast-[.25] ..." src="/img/mountains.jpg" />

对于 CSS 变量，您也可以使用 对比度-(<自定义属性>) 语法

<img class="contrast-(--my-contrast) ..." src="/img/mountains.jpg" />

这只是 对比度-[var(<自定义属性>)] 的简写，它会自动为您添加 var() 函数。

前缀a filter: contrast() 实用工具带有像 md: 这样的断点变体，以便仅在中等屏幕尺寸及以上时应用实用工具

<img class="contrast-125 md:contrast-150 ..." src="/img/mountains.jpg" />

了解有关在变体文档中使用变体的更多信息。