滤镜
filter: saturate()
用于向元素应用饱和度滤镜的实用工具。
| 类名 | 样式 |
|---|---|
saturate-<number> | filter: saturate(<number>%); |
saturate-(<自定义属性>) | filter: saturate(var(<自定义属性>)); |
saturate-[<value>] | filter: saturate(<value>); |
示例
基本示例
使用类似 saturate-50 和 saturate-100 这样的实用类来控制元素的饱和度
saturate-50
saturate-100
saturate-150
saturate-200
<img class="saturate-50 ..." src="/img/mountains.jpg" /><img class="saturate-100 ..." src="/img/mountains.jpg" /><img class="saturate-150 ..." src="/img/mountains.jpg" /><img class="saturate-200 ..." src="/img/mountains.jpg" />使用自定义值
使用 saturate-[<value>] 语法 来设置饱和度基于完全自定义的值
<img class="saturate-[.25] ..." src="/img/mountains.jpg" />对于 CSS 变量，你也可以使用 saturate-(<自定义属性>) 语法
<img class="saturate-(--my-saturation) ..." src="/img/mountains.jpg" />这只是 saturate-[var(<自定义属性>)] 的简写形式，它会自动为你添加 var() 函数。
响应式设计
前缀a filter: saturate() 实用工具 带有断点变体，例如 md:，仅在中等 屏幕尺寸及以上尺寸应用该实用工具
<img class="saturate-50 md:saturate-150 ..." src="/img/mountains.jpg" />了解更多关于在变体文档中使用变体的信息。