滤镜
背景滤镜
用于为元素应用背景滤镜的工具类。
| Class | Styles |
|---|---|
backdrop-filter-none | backdrop-filter: none; |
backdrop-filter-(<custom-property>) | backdrop-filter: var(<custom-property>); |
backdrop-filter-[<value>] | backdrop-filter: <value>; |
示例
基本示例
使用 backdrop-blur-xs 和 backdrop-grayscale 等工具类为元素的背景应用滤镜：
背景模糊（极小）
背景灰度
组合效果
<div class="bg-[url(/img/mountains.jpg)] ..."> <div class="背景模糊-xs ..."></div></div><div class="bg-[url(/img/mountains.jpg)] ..."> <div class="背景灰度 ..."></div></div><div class="bg-[url(/img/mountains.jpg)] ..."> <div class="背景模糊-xs 背景灰度 ..."></div></div>你可以组合以下背景滤镜工具类：模糊、亮度、对比度、灰度、色相旋转、反转、不透明度、饱和度 和 怀旧。
移除滤镜
使用 背景滤镜-无 工具类来移除应用于元素的所有背景滤镜：
<div class="背景模糊-md 背景亮度-150 md:背景滤镜-无"></div>使用自定义值
Use the 背景滤镜-[<value>] syntax to set the 背景滤镜 based on a completely custom value:
<div class="背景滤镜-[url('filters.svg#filter-id')] ..."> <!-- ... --></div>For CSS variables, you can also use the 背景滤镜-(<custom-property>) syntax:
<div class="背景滤镜-(--my-背景滤镜) ..."> <!-- ... --></div>This is just a shorthand for 背景滤镜-[var(<custom-property>)] that adds the var() function for you automatically.
在悬停时应用
Prefix a 背景滤镜 utility with a variant like hover:* to only apply the utility in that state:
<div class="背景模糊-sm hover:背景滤镜-无 ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.
响应式设计
Prefix a 背景滤镜 utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="背景模糊-sm md:背景滤镜-无 ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.