使用CSS模糊div [英] Bluring a div with CSS

问题描述

是否可以使用CSS3模糊div？我不是指javascript模糊，我的意思是photoshop模糊。

我不想让div的边缘模糊，我想要的内容div也要模糊。

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

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

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

这适用于Firefox 4，应该从3.5开始工作，除了使用 svg 元素没有命名空间/ xmlns的东西（我认为应该在3.6中工作）。

是一些问题，它有多少空间，它使它流入;

---

取决于你的内容，组合多个 box-shadow （插入和开头）和 text-shadow 可以实现类似的效果。上面的链接还包含了对文本达到类似效果的开始。

Is it possible to blur a div with CSS3? And I don't mean the javascript blur, I mean the photoshop blur.

I don't want the edges of the div to be blurred, I want to contents of the div to be blurred as well. (Am I asking too much out of browsers?)

If not possible, what would be some good workaround techniques?

解决方案

It is possible with an SVG filter.

The basics of it is that it's just a simple feGaussianBlur.

Here it is: http://jsfiddle.net/aXUtU/1/

This works in Firefox 4, and should work from 3.5 up except for the matter of using the svg element without namespace/xmlns stuff (I think it should work in 3.6).

There are some issues with how much space it gives it to flow in; if you take that text down to one line you'll see the last in particular is getting clipped.

---

Depending on your content, combining multiple box-shadows (inset and outset) and text-shadow could achieve a similar effect. The link above also contains a start on achieving a similar effect on text.

这篇关于使用CSS模糊div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！