若要使属性具有任何可见效果，需要从嵌套元素或绝对位置沿Z轴将两个元素堆叠在一起。另外，应用背景过滤器的元素的背景必须是半透明的。backdrop filter的工作原理是使浏览器引擎将目标锁定在样式元素后面的内容，而不是元素本身的背景。过滤效果随后应用于该内容，在最终呈现中，背景与页面上的其他元素合成。

对元素应用背景过滤器也会创建新的堆叠上下文，就像应用不透明度时一样。

语法：

backdrop-filter: none | <filter-function-list>

首字母：无

适用于：所有元素。在svg中，它应用于没有<defs>元素和所有图形元素的容器元素

可设置动画: 是

<filter-function-list>

一个空间分隔的过滤函数列表，应用于它们被声明的顺序。下面是可用的筛选器函数列表，它们与筛选器属性的筛选器功能相同。

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

drop-shadow()

url()

2.4 CSS3 box-sizing 属性

Box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

默认值:	content-box
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.boxSizing="border-box"

语法

box-sizing: content-box|border-box|inherit:

值	说明
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	指定 box-sizing 属性的值，应该从父元素继承

2.5 实现思路

1. 定义三个box，布局方式都为absolute。

2. 第一个box 放背景图片，第二个box实现模糊过滤，第三个box放要显示的图片。

3. 通过监听鼠标移动，改变css 自定义属性值，通过calc()， var()函数获取计算自定义属性值实现移动效果。

3 参考代码

3.1 HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>毛玻璃效果:微信公众号AlbertYang</title>
  </head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <body>
    <section>
      <div class="imgBx">
        <h1>毛玻璃效果</h1>
      </div>
      <div class="box box1"></div>
      <div class="box box2">
        <h1>毛玻璃效果</h1>
      </div>
    </section>
    <script>
      const position = document.documentElement;
      position.addEventListener('mousemove', e => {
        position.style.setProperty('--x', e.pageX + 'px');
        position.style.setProperty('--y', e.pageY + 'px');
      })
</script>
  </body>
</html>

3.2 CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
section .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(wbb.jpg);
  background-size: 100%;
  background-position: calc(var(--x)/5) calc(var(--y)/5);
}
section .box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
}
section .box.box2 {
  background: url(wbb.jpg);
  background-size: 100%;
  clip-path: circle(260px at center);
  background-position: calc(var(--x)/5) calc(var(--y)/5);
}
section .box.box2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25);
  z-index: 10;
  border-radius: 50%;
}
section h1 {
  position: absolute;
  margin-top: 30%;
  color: #fff;
  font-size: 88px;
  transform: translate(calc(var(--x)/5), calc(var(--y)/5));
}

5分钟用CSS实现毛玻璃效果 CSS Glassmorphism_筛选器