css - 如何使用 css 模糊滤镜？

Question

我想建立一个博客，所以我想使用现代的外观。我对像 iOS 7 这样的模糊效果非常感兴趣。我读过关于应用于项目的过滤器。好吧，我想在菜单栏中使用此过滤器（将固定在顶部），以便下面的内容显得模糊。有办法用css做到这一点吗？还是其他代码语言？

Answer 1

您可以使用以下方法创建模糊效果：

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

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