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