最近一段时间有点忙碌，主要是开始着手开发一款属于自己的typecho主题了，有着wp主题ease的经验，相信这次应该也可以更好的收场。

但是我却被CSS的模糊折磨了我好几个小时。。。

高斯模糊

我是挺喜欢高斯模糊的样式的，追溯到很久很久以前，miui6的模糊真的是让人眼前一亮。

css也是支持图片模糊的，并且实现也非常的简单，使用filter属性即可。首先，我们来看看filter到底是什么：

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)，说白了就是给图片加个滤镜。如果你不知道啥是高斯模糊，没关系，你一定见过某些H图片被模糊掉的地方。

语法什么的直接参考菜鸟教程：https://www.runoob.com/cssref/css3-pr-filter.html

重点来了，我通过使用backdrop-filter：blur(10px);来为我的图片背景添加模糊效果，

这样给我带来了很好的视觉体验，在我调整好样式之后准备下一步的工作，我发现了一个问题，就是FireFox不支持这个属性。也就是说我新写的内容在它那里完全无效。

然后我就奔溃了！闲着没事开发那么多浏览器内核干嘛？？ ::tieba:Y.tb8::

解决方案

删掉body的背景图片，然后设置了一个div，内部放上一张图片作为网站背景图，并设置z-inde属性。

然后直接使用filter属性即可。

最后效果是这个样子