最近一段时间有点忙碌,主要是开始着手开发一款属于自己的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属性即可。

最后效果是这个样子

Office365 微信公众号
最后修改:2020 年 04 月 15 日 08 : 58 PM
如果您觉得我的文章有帮助,请随意赞赏!