关于html毛玻璃效果

1.backdrop-filter

使用方法：当前页面使用，适用于当前元素背后的所有元素

backdrop-filter: blur(5px);

缺点：安卓兼容性不佳

2.filter

使用方法：背后页面使用，适用于当前元素

filter: blur(5px);

缺点：会有一圈白边，因为模糊图片边缘会使body的背景色透出来，而body一般是白底的。

解决方法如下

• 对于小图：给包含它的父元素添加一个 overflow: hidden

• 对于背景图：

  a.如果不需要考虑细节，把图片比例调大一点：

  filter: blur(5px) brightness(0.5);
  transform: scale(1.02)
  

  b.绝对定位设置图片大小也可：

  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  background: url("XXX");
  background-size: cover;
  filter: blur(5px);
  

  c.如果背景图颜色比较深，直接把body的background设置为黑色，或者和背景色相近的颜色。

  body{
    background: #000;
  }