码云前端开发 2024-09-27

CSS3的filter和backdrop-filter实现高斯模糊

文章目录隐藏

API 介绍

filter
backdrop-filter

示例

filter 实例一
filter 实例二
backdrop-filter 实例一

总结

在 Web 开发中，当需要对页面元素或背景应用高斯模糊效果时，CSS3 提供了两个非常有用的属性：filter和backdrop-filter。这两个属性虽然都能实现模糊效果，但它们在应用方式和效果展示上有着显著的区别。接下来，我们详细了解一下这两个属性的用法及其差异。

API 介绍

filter

filter属性应用于元素本身，它不仅可以用来实现高斯模糊（blur()函数），还可以用来添加其他视觉效果，如亮度（brightness()）、对比度（contrast()）、灰度（grayscale()）等。当使用blur()函数时，它会使得元素自身（包括其内容）变得模糊。
语法：

// 使用空格分隔多个滤镜
filter: none;
// 高斯模糊
filter: blur(4px);
// 线性亮度
filter: brightness();
// 对比度
filter: contrast();
// 阴影效果
filter: drop-shadow();
// 灰度
filter: grayscale();
// 色相旋转
filter: hue-rotate();
// 反转图像
filter: invert();
// 转换透明度
filter: opacity();
// 饱和度
filter: saturate();
// 褐色
filter: sepia();
// SVG 滤镜
filter: url();

其中高斯模糊 filter: blur();

backdrop-filter

与filter不同，backdrop-filter属性不是作用于元素本身，而是作用于元素背后的内容（即该元素的背景部分，可能是其父元素或其他元素的内容）。这允许开发者在保持元素内部内容清晰的同时，对背景应用视觉效果，如高斯模糊。

对比：

filter 属性必须要加载图像上或者背景图上，而 backdrop-filter 只要是一个元素就可以。

语法：

backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

示例

filter 实例一

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .wrapBox2 {
        width: 800px;
        height: 300px;
        overflow: hidden;
        position: relative;
        background-image: url("./win.jpeg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        filter: blur(10px);
      }
      .subBox {
        position: absolute;
        width: calc(100% - 100px);
        height: calc(100% - 100px);
        z-index: 2;
      }
      .text {
        position: relative;
        /* z-index: 10; */
        font-size: 40px;
        font-weight: bold;
        color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="wrapBox2">
      <div class="subBox"></div>
      <div class="text">全部模糊</div>
    </div>
  </body>
</html>

效果如下：

这里要注意的一点是，添加模糊后，实际的大小会超出我们设置的宽高，因为周围的毛边效果，你可以在外面包一层并设置 overflow: hidden;

filter 实例二

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .wrapBox2 {
        width: 800px;
        height: 300px;
        /* overflow: hidden; */
        position: relative;
      }
      .subBox {
        width: 100%;
        height: 100%;
        position: absolute;
        width: calc(100% - 100px);
        height: calc(100% - 100px);
        z-index: 2;
        filter: blur(10px);
      }
      .text {
        position: relative;
        /* z-index: 10; */
        font-size: 40px;
        font-weight: bold;
        color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="wrapBox2">
      <img src="./win.jpeg" class="subBox" />
      <div class="text">全部模糊</div>
    </div>
  </body>
</html>

效果如下：

这种方式的话，文字和图片由于是平级的，所以文字要么在图片下方，要么在上方（根据 z-index 来控制），而不会对文字进行模糊。

backdrop-filter 实例一

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .wrapBox2 {
        width: 800px;
        height: 300px;
        overflow: hidden;
        position: relative;
        background-image: url("./win.jpeg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .subBox {
        position: absolute;
        width: calc(100% - 100px);
        height: calc(100% - 100px);
        z-index: 2;
        backdrop-filter: blur(10px);
        /* top: 100px; */
      }
      .text {
        position: relative;
        /* z-index: 10; */
        font-size: 40px;
        font-weight: bold;
        color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="wrapBox2">
      <div class="subBox"></div>
      <div class="text">部分模糊</div>
    </div>
  </body>
</html>

效果如下：