使用CSS模糊div div

使用CSS3模糊div是否可能？我不是说javascript模糊，我的意思是Photoshop模糊。使用CSS模糊div div

我不想让div的边缘模糊，我想div的内容也会模糊。（我是否问了太多的浏览器？）

如果不可能，那么一些好的解决方法技巧是什么？

来源

2010-12-18 Utkarsh Sinha

为ie你可以使用过滤器：http://msdn.microsoft.com/en-us/library/ms532979(VS.85).aspx其他浏览器使用画布可能是要走的路。 – Zevan 2010-12-18 16:37:41

它可能与一个SVG过滤器。

它的基本原理是它只是一个简单的feGaussianBlur。

这就是：http://jsfiddle.net/aXUtU/1/

这在Firefox 4，而应该从3.5工作起来除了使用svg元素没有命名空间/ XMLNS东西（我认为它应该在3.6工作）的问题。

有多少空间让它流入;如果你把这段文字放到一行中，你会看到特别是最后一个剪辑。

根据您的内容，结合多个box-shadow S（inset并开始）和text-shadow可以达到类似的效果。上面的链接还包含一个对文本实现类似效果的开始。

来源

2010-12-18 10:48:04

值得一提的是，它只适用于Firefox *（我的Chrome没有渲染它，因此我认为其他人也不会这样做），因此，它毕竟不是那么棒。 – jolt 2010-12-18 11:03:19

@Tom：我不确定是否支持浏览器，但我觉得它只是Firefox。使用SVG的方式有点棘手;例如背景图像在所有现代浏览器中都可以与SVG一起使用（我将FF 4分类为现代版，而不是3.6版）。或者，如果文档的实际部分是在SVG中完成的，那么它将起作用。 @Utkarsh：由于浏览器的支持，SVG过滤器可能不会做你需要的东西，但是我的'box-shadow' +'text-shadow'建议应该摆动它，不提供图像。我将用一些示例来更新演示。 – 2010-12-18 12:29:20

虽然我看到他正在寻找替代品，但它不是CSS。 – Rob 2010-12-18 13:43:13

嗯...我想出了这一点：

.blur { 
    color: transparent; 
    text-shadow: 0px 0px 2px #000000; 
}

这将使文字模糊，可以肯定的！唯一的问题是它只会使文本模糊。没有影响或任何图像。但我认为，与这http://plugins.jquery.com/project/blurimage一起，你可以使它更强大！

玩得开心！

来源

2010-12-18 15:05:52 jolt

使用CSS模糊div div

回答

相关问题