backdrop-filter

示例

基本示例

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

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