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