如何使用 CSS 的backdrop - filter属性实现背景模糊等特效，有哪些兼容性问题？

时间：2025-03-30 21:20:21

大白话如何使用 CSS 的backdrop - filter属性实现背景模糊等特效，有哪些兼容性问题？

嘿，朋友！今天咱们来聊聊 CSS 里超酷的 backdrop-filter 属性，它能让你轻松实现背景模糊等超炫特效。咱们先看看这属性到底是啥，然后说说咋用它，最后再讲讲兼容性的事儿。

啥是 backdrop-filter 属性

简单来说，backdrop-filter 属性就是用来给元素背后的背景添加视觉效果的，像模糊、高斯模糊、亮度调整这些效果都能实现。这么说吧，就好比你透过磨砂玻璃看东西，玻璃后面的景象就变得模糊起来，这个属性就有类似的效果。

咋用 backdrop-filter 属性实现背景模糊特效

咱先看个简单的例子，用它来实现背景模糊。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景模糊特效</title>
  <style>
    /* 给 body 设置一个背景图片 */
    body {
      background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    /* 创建一个容器元素 */
    .container {
      width: 300px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景色 */
      /* 使用 backdrop-filter 属性实现背景模糊，这里设置模糊半径为 10px */
      backdrop-filter: blur(10px);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 容器内的文本样式 */
    .text {
      font-size: 24px;
      color: #333;
    }
  </style>
</head>

<body>
  <!-- 创建一个容器元素 -->
  <div class="container">
    <!-- 容器内的文本 -->
    <div class="text">背景模糊啦！</div>
  </div>
</body>

</html>

在这个例子里，咱们给 body 设置了一张背景图片，然后创建了一个 div 容器。在这个容器的 CSS 样式里，用 backdrop-filter: blur(10px); 实现了背景模糊效果，模糊半径是 10px。

还能实现其他啥特效

除了模糊，backdrop-filter 还能实现好多其他特效呢。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>其他背景特效</title>
  <style>
    body {
      background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');
      background-size: cover;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    /* 模糊效果的容器 */
    .blur {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.5);
      /* 模糊效果，半径 10px */
      backdrop-filter: blur(10px);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 亮度调整效果的容器 */
    .brightness {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.5);
      /* 亮度调整为 150% */
      backdrop-filter: brightness(150%);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 对比度调整效果的容器 */
    .contrast {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.5);
      /* 对比度调整为 150% */
      backdrop-filter: contrast(150%);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 容器内的文本样式 */
    .text {
      font-size: 18px;
      color: #333;
    }
  </style>
</head>

<body>
  <!-- 模糊效果的容器 -->
  <div class="blur">
    <div class="text">模糊效果</div>
  </div>
  <!-- 亮度调整效果的容器 -->
  <div class="brightness">
    <div class="text">亮度调整</div>
  </div>
  <!-- 对比度调整效果的容器 -->
  <div class="contrast">
    <div class="text">对比度调整</div>
  </div>
</body>

</html>

在这个例子里，咱们创建了三个容器，分别用 backdrop-filter 实现了模糊、亮度调整和对比度调整三种特效。

兼容性问题

虽然 backdrop-filter 很厉害，但不是所有浏览器都支持它。像 Safari 浏览器就需要加 -webkit- 前缀，比如：

.backdrop {
  -webkit-backdrop-filter: blur(10px); /* Safari 浏览器需要加前缀 */
  backdrop-filter: blur(10px);
}

还有一些旧版本的浏览器可能完全不支持这个属性，所以在实际使用的时候，最好做一些兼容性处理，比如给不支持的浏览器提供一个替代方案。

好啦，现在你对 backdrop-filter 属性应该有更深入的了解了吧，赶紧动手试试，做出超炫的背景特效！

除了模糊，backdrop-filter属性还能实现哪些特效？

backdrop-filter 属性除了能实现模糊特效外，还能实现多种其他特效，以下为你详细介绍：

1. 亮度调整（brightness）

brightness() 函数可以调整元素背后背景的亮度。参数值小于 100% 会使背景变暗，大于 100% 则会使背景变亮。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>亮度调整特效</title>
  <style>
    body {
      background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .brightness-container {
      width: 300px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.5);
      /* 亮度调整为 150%，使背景变亮 */
      backdrop-filter: brightness(150%); 
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .text {
      font-size: 24px;
      color: #333;
    }
  </style>
</head>

<body>
  <div class="brightness-container">
    <div class="text">亮度调整特效</div>
  </div>
</body>

</html>

2. 对比度调整（contrast）

contrast() 函数用于调整元素背后背景的对比度。参数值小于 100% 会降低对比度，大于 100% 会增加对比度。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>对比度调整特效</title>
  <style>
    body {
      background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .contrast-container {
      width: 300px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.5);
      /* 对比度调整为 150%，增加对比度 */
      backdrop-filter: contrast(150%); 
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .text {
      font-size: 24px;
      color: #333;
    }
  </style>
</head>

<body>
  <div class="contrast-container">
    <div class="text">对比度调整特效</div>
  </div>
</body>

</html>

3. 灰度化（grayscale）

grayscale() 函数可以将元素背后的背景转换为灰度图像。参数值为 0% 时背景保持原色，100% 时背景完全变为灰度图。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>灰度化特效</title>
  <style>
    body {
      background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .grayscale-container {
      width: 300px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.5);
      /* 背景完全灰度化 */
      backdrop-filter: grayscale(100%); 
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .text {
      font-size: 24px;
      color: #333;
    }
  </style>
</head>

<body>
  <div class="grayscale-container">
    <div class="text">灰度化特效</div>
  </div>
</body>

</html>

4. 色相旋转（hue-rotate）

hue-rotate() 函数能够改变元素背后背景的色相。参数是一个角度值，单位为度（deg），取值范围通常是 0deg 到 360deg。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>色相旋转特效</title>
  <style>
    body {
      background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .hue-rotate-container {
      width: 300px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.5);
      /* 色相旋转 90 度 */
      backdrop-filter: hue-rotate(90deg); 
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .text {
      font-size: 24px;
      color: #333;
    }
  </style>
</head>

<body>
  <div class="hue-rotate-container">
    <div class="text">色相旋转特效</div>
  </div>
</body>

</html>

5. 饱和度调整（saturate）

saturate() 函数用于调整元素背后背景的饱和度。参数值小于 100% 会降低饱和度，大于 100% 会增加饱和度。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>饱和度调整特效</title>
  <style>
    body {
      background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .saturate-container {
      width: 300px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.5);
      /* 饱和度调整为 200%，增加饱和度 */
      backdrop-filter: saturate(200%); 
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .text {
      font-size: 24px;
      color: #333;
    }
  </style>
</head>

<body>
  <div class="saturate-container">
    <div class="text">饱和度调整特效</div>
  </div>
</body>

</html>

6. 反相（invert）

invert() 函数可以将元素背后背景的颜色进行反相处理。参数值为 0% 时背景保持原色，100% 时背景颜色完全反转。

<!DOCTYPE html>
<html lang="en">

<head

相关文章