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

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

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

啥是 `backdrop-filter` 属性

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

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

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

html 复制代码

<!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 还能实现好多其他特效呢。

html 复制代码

<!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- 前缀，比如：

css 复制代码

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

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

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

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

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

1. 亮度调整（brightness）

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

html 复制代码

<!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% 会增加对比度。

html 复制代码

<!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% 时背景完全变为灰度图。

html 复制代码

<!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。

html 复制代码

<!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% 会增加饱和度。

html 复制代码

<!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% 时背景颜色完全反转。

html 复制代码

<!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;
    }

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

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

<body>
  <div class="invert-container">
    <div class="text">反相特效</div>
  </div>
</body>

</html>

7. 模糊（blur）

你之前提到的模糊效果是 backdrop-filter 最常用的特效之一。blur() 函数可以使元素背后的背景变得模糊，参数值表示模糊的半径，值越大，模糊效果越明显。

html 复制代码

<!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;
    }

    .blur-container {
      width: 300px;
      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;
    }

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

<body>
  <div class="blur-container">
    <div class="text">模糊特效</div>
  </div>
</body>

</html>

这些特效可以单独使用，也可以组合使用，从而创造出更加丰富多样的视觉效果。在组合使用时，只需要将多个函数用空格分隔开即可，例如：backdrop-filter: blur(10px) brightness(150%);。

如何针对不同浏览器进行backdrop-filter属性的兼容性处理？

backdrop-filter 是一个非常实用的 CSS 属性，不过它在不同浏览器中的支持情况有所不同。为了保证在各个浏览器中都能有较好的显示效果，需要进行兼容性处理。下面为你详细介绍处理方法。

1. 添加浏览器前缀

在 Safari 浏览器中，需要使用 -webkit- 前缀来支持 backdrop-filter 属性。所以，在编写代码时，要同时添加带前缀和不带前缀的属性，示例如下：

css 复制代码

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

在上述代码里，先使用 -webkit-backdrop-filter 以支持 Safari 浏览器，再使用标准的 backdrop-filter 属性，这样可以保证在支持标准属性的浏览器中也能正常显示。

2. 使用特性检测

可以借助 JavaScript 进行特性检测，以此判断浏览器是否支持 backdrop-filter 属性。如果不支持，就采用其他替代方案。以下是一个示例代码：

html 复制代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>backdrop-filter 兼容性处理</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;
        }

        .container {
            width: 300px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .text {
            font-size: 24px;
            color: #333;
        }

        /* 支持 backdrop-filter 的样式 */
        .backdrop-filter-supported {
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
        }

        /* 不支持 backdrop-filter 的替代样式 */
        .backdrop-filter-not-supported {
            background-color: rgba(255, 255, 255, 0.8);
        }
    </style>
</head>

<body>
    <div class="container" id="my-container">
        <div class="text">这是一个容器</div>
    </div>
    <script>
        const container = document.getElementById('my-container');
        const testElement = document.createElement('div');
        if ('backdropFilter' in testElement.style || '-webkit-backdrop-filter' in testElement.style) {
            container.classList.add('backdrop-filter-supported');
        } else {
            container.classList.add('backdrop-filter-not-supported');
        }
    </script>
</body>

</html>

在这个示例中，先创建了一个测试元素 testElement，接着检查该元素的样式中是否存在 backdropFilter 或者 -webkit-backdrop-filter 属性。若存在，就给容器元素添加 backdrop-filter-supported 类，使用 backdrop-filter 实现模糊效果；若不存在，就添加 backdrop-filter-not-supported 类，采用不透明的背景色作为替代方案。

3. 提供替代方案

对于不支持 backdrop-filter 属性的浏览器，可以提供一些替代方案，比如使用半透明的背景色。示例如下：

css 复制代码

.element {
    /* 支持 backdrop-filter 的样式 */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);

    /* 不支持 backdrop-filter 的替代样式 */
    background-color: rgba(255, 255, 255, 0.8);
}

在这个代码中，当浏览器支持 backdrop-filter 时，会应用模糊效果和半透明背景色；当不支持时，会使用不那么透明的背景色作为替代，确保页面的基本显示效果。

通过以上方法，你可以有效地处理 backdrop-filter 属性在不同浏览器中的兼容性问题，为用户提供一致的视觉体验。

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

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

啥是 backdrop-filter 属性

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

还能实现其他啥特效

兼容性问题

1. 亮度调整（brightness）

2. 对比度调整（contrast）

3. 灰度化（grayscale）

4. 色相旋转（hue-rotate）

5. 饱和度调整（saturate）

6. 反相（invert）

7. 模糊（blur）

1. 添加浏览器前缀

2. 使用特性检测

3. 提供替代方案

啥是 `backdrop-filter` 属性

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