滤镜
用于将背景滤镜应用于元素的实用工具。
类名 | 样式 |
---|---|
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
的实用工具将滤镜应用于元素的背景
backdrop-blur-xs
backdrop-grayscale
组合
<div class="bg-[url(/img/mountains.jpg)] ..."> <div class="backdrop-blur-xs ..."></div></div><div class="bg-[url(/img/mountains.jpg)] ..."> <div class="backdrop-grayscale ..."></div></div><div class="bg-[url(/img/mountains.jpg)] ..."> <div class="backdrop-blur-xs backdrop-grayscale ..."></div></div>
您可以组合以下背景滤镜实用工具: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, 和 sepia。
使用 backdrop-filter-none
实用工具移除应用于元素的所有背景滤镜
<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>
使用 backdrop-filter-[<value>]
语法 来设置背景滤镜基于完全自定义的值
<div class="backdrop-filter-[url('filters.svg#filter-id')] ..."> <!-- ... --></div>
对于 CSS 变量,您还可以使用 backdrop-filter-(<custom-property>)
语法
<div class="backdrop-filter-(--my-backdrop-filter) ..."> <!-- ... --></div>
这只是一个简写形式,用于 backdrop-filter-[var(<custom-property>)]
它会自动为您添加 var()
函数。
前缀一个 backdrop-filter
实用工具,带有类似 hover:*
的变体,仅在该状态下应用实用工具
<div class="backdrop-blur-sm hover:backdrop-filter-none ..."> <!-- ... --></div>
在变体文档中了解更多关于使用变体的信息。
前缀一个 backdrop-filter
实用工具 带有断点变体(如 md:
),仅在中等 屏幕尺寸及以上时应用实用工具
<div class="backdrop-blur-sm md:backdrop-filter-none ..."> <!-- ... --></div>
在变体文档中了解更多关于使用变体的信息。