VuePress

backdrop-filter 是 CSS 中的一个属性，用于在元素的背景上应用图形效果（如模糊或颜色变化）。它主要用于创造玻璃效果或其他复杂的视觉效果。以下是一些关于 backdrop-filter 属性的详细介绍：

https://www.youtube.com/watch?v=PL3Odw-k8W4

基本语法

.element {
  backdrop-filter: <filter-function> [<filter-function>]*;
}

常见的过滤器函数

blur(<length>)：应用模糊效果。<length> 指定模糊的半径，如 blur(5px)。
brightness(<number>)：调整亮度。<number> 为亮度值，如 brightness(0.5) 使图像变暗，brightness(1.5) 使图像变亮。
contrast(<number>)：调整对比度。<number> 为对比度值，如 contrast(2) 将对比度加倍。
grayscale(<percentage>)：应用灰度效果。<percentage> 指定灰度的百分比，如 grayscale(50%)。
invert(<percentage>)：反转颜色。<percentage> 指定反转的百分比，如 invert(100%) 完全反转颜色。
opacity(<percentage>)：调整不透明度。<percentage> 指定不透明度的百分比，如 opacity(50%)。
sepia(<percentage>)：应用棕褐色效果。<percentage> 指定效果的百分比，如 sepia(100%)。
saturate(<number>)：调整饱和度。<number> 为饱和度值，如 saturate(2) 将饱和度加倍。
hue-rotate(<angle>)：调整色相。<angle> 指定旋转的角度，如 hue-rotate(90deg)。

示例

/* 应用模糊和亮度调整 */
.example {
  backdrop-filter: blur(5px) brightness(0.8);
}

兼容性

backdrop-filter 在一些现代浏览器中已经得到了支持，但在较旧的浏览器中可能不完全支持。为确保跨浏览器兼容性，可以使用适当的前缀或备用方案。

使用场景

模糊背景：常用于弹出窗口、对话框等，以突出前景内容，同时提供模糊背景。
玻璃效果：在一些 UI 设计中，通过结合透明度和模糊效果，模拟玻璃材质的外观。
视觉效果增强：通过颜色调整、对比度增强等方式，提升视觉效果。

示例代码

以下是一个完整的示例，展示如何使用 backdrop-filter 创建模糊背景效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Backdrop Filter Example</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url('background.jpg');
      background-size: cover;
      background-position: center;
    }

    .box {
      width: 300px;
      height: 200px;
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: #333;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="box">Hello, World!</div>
</body>
</html>

在这个示例中，.box 元素应用了 backdrop-filter 属性，通过模糊效果突出其内容，同时模糊背景图像。

Hello, World!