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 channel 属性时)但是模糊不会受到重叠元素边界的限制。