CSS实现背景模糊/毛玻璃效果

所有代码地址：filter
文末也有代码

---

方法一

效果

原理

如果只单纯的想实现背景模糊效果，而背景之上没有其他内容，那么就使用filter（滤镜）就足以，其中包括模糊，亮度，灰度，阴影等等：参考 MDN filter 相关内容。如果在其中上面还有文字，也同样会出现模糊。用下面的方法可以解决

---

方法二

效果

原理

这里就是使用伪元素（before，after），也是我在网上搜到的大多教程的方法，确实是成功了，但是项目编译后该图片的路径确不正确导致无法使用，这里始终没有找到原因。但是小伙伴不失可以试试这种方法，其次，这种模糊背景本身，看起来把边模糊了。

---

方法三

效果

原理

首先是效果的文字居中是我懒，不想调了╮(╯_╰)╭
其次，这里不是模糊背景本身，而是加了一层『毛玻璃』一样的视觉效果透过来的图片看起来模糊.（说白了就是滤镜吧）并且边缘整齐。参考 MND backdrop-filter

---

代码

1.只要看到关键属性，再依据自己想要的效果调整和实践应该就可以
2.这个CSS中图片链接自己随意替换

HTML

<div class='container'>
  <p class='title'>Method 1:</p>
  <div class='bur  method1-bur1'>
  </div>

  <div class='bur method1-bur2'>
  </div>
</div>
<