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