如何使用css模糊过滤器

Question

我想建一个博客，所以我想使用现代的外观。我对像iOS7这样的模糊效果很感兴趣。我读过关于应用于项目的筛选器的文章。好吧，我想在菜单栏中使用这个过滤器（它将固定在顶部），这样下面的内容就会变得模糊。有一种方法可以用css做到这一点吗？或者其他代码长度？

Answer 1

您可以使用创建模糊效果

<style type="text/css">
#theDiv { -webkit-filter: blur(18px); }
</style>
<div id="theDiv"></div>

但它并没有得到非常可靠的支持（我认为只有在Chrome中）。据我所知，没有一个插入值，因此您需要一个事件来触发它（即，当另一个元素位于div顶部并具有透明、不透明度或其他时髦的Alpha通道属性时），但模糊不会受到覆盖元素边界的限制。