1. 滤镜
  2. backdrop-filter

滤镜

backdrop-filter

用于将背景滤镜应用于元素的实用工具。

类名样式
backdrop-filter-none
backdrop-filter: none;
backdrop-filter-(<custom-property>)
backdrop-filter: var(<custom-property>);
backdrop-filter-[<value>]
backdrop-filter: <value>;

示例

基本示例

使用类似 backdrop-blur-xsbackdrop-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>

变体文档中了解更多关于使用变体的信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策