CSS背景模糊--backdrop-filter

实现的效果如上图所示。

什么是 `backdrop-filter`

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

backdrop-filter 与 filter 非常类似，可以取的值都是一样的，但是一个是作用于整个元素，一个是只作用于元素后面的区域。

backdrop-filter：developer.mozilla.org/zh-CN/docs/…

filter：developer.mozilla.org/zh-CN/docs/…

backdrop-filter 兼容性问题

以上效果的代码如下：

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

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      html,
      body {
        height: 100%;
        width: 100%;
      }

      body {
        background-image: url('https://qn.huat.xyz/mac/20211203155112.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .container {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 343px;
        height: 170px;
        margin: 0 auto 40px;
        border-radius: 24px;
        background-image: url('https://qn.huat.xyz/mac/20211203155112.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 24px;
        font-family: sans-serif;
        font-size: 24px;
        text-align: center;
        line-height: 1;
        color: white;
      }

      .cover {
        width: 343px;
        height: 170px;
        position: relative;
        text-align: center;
        line-height: 170px;
        color: white;
        margin: 0 auto 40px;
      }

      .cover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 343px;
        height: 170px;
        background: transparent url('https://qn.huat.xyz/mac/20211203155112.png') center center no-repeat;
        filter: blur(10px);
        z-index: -1;
        background-size: cover;
      }

      .bg {
        background: url('https://qn.huat.xyz/mac/20211203155112.png');
        width: 343px;
        height: 170px;
        text-align: center;
        line-height: 600px;
        margin: 0 auto;
      }

      .bg-blur {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 343px;
        height: 170px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        -webkit-filter: blur(10px);
        -moz-filter: blur(10px);
        -o-filter: blur(10px);
        -ms-filter: blur(10px);
        filter: blur(10px);
      }

      .content {
        color: #ffffff;
        font-size: 24px;
      }

      .content-front {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 343px;
        height: 170px;
        line-height:170px;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <!-- 方式一：backdrop-filter -->
    <div class="container">
      <div class="box">
        <p>backdrop-filter: blur(10px)</p>
      </div>
    </div>
    <!-- 方式二：filter+伪元素 -->
    <div class="cover">
      <h1>filter: blur(10px)</h1>
    </div>
    <!-- 方式二：filter -->
    <div class="container3">
      <div class="bg bg-blur"></div>
      <div class="content content-front">filter: blur(10px)</div>
    </div>
  </body>

</html>
复制代码

如何兼容？

在元素的背后，叠加一张同样的图片，利用 background-attachment: fixed 将叠加在元素下面的图片定位到与背景相同的坐标，再使用 filter: blur() 对其进行模糊处理即可。效果如下：

代码如下：

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

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      body {
        height: 100vh;
        background-image: url('https://qn.huat.xyz/mac/20211203155112.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
      }

      .flex{
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .box {
        flex-direction: column;
        position: relative;
        width: 600px;
        height: 300px;
        overflow: hidden;
        z-index: 10;
        background-color: rgba(255, 255, 255, 0.5);
        font-size: 24px;
        color: #fff;
      }

      .box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('https://qn.huat.xyz/mac/20211203155112.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        filter: blur(10px);
        z-index: -1;
      }
    </style>
  </head>

  <body class="flex">
    <div class="flex box"> 
      <p>background-attachment: fixed</p>
      <p>filter: blur(10px)</p>
    </div>
  </body>

</html>
复制代码

CSS背景模糊--backdrop-filter

CSS背景模糊--backdrop-filter

什么是 backdrop-filter

如何兼容？

猜你喜欢

什么是 `backdrop-filter`