如何实现这种模糊效果?

问题描述:

enter image description here如何实现这种模糊效果?

正如你所看到的,弹出框的背景是相对黑色和模糊。我怎样才能达到类似的效果?背景模糊效果使用CSS来书写还是只是一个普通的图像?

谢谢。

.overlay 
{ 
    background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7)) 
} 

来源:检查元素

编辑:

Here's a link to a cross browser version

我相信你可以用HTML5中的CSS3渐变做到这一点,或者你可以使用透明的PNG。

+0

你会想使用'img'元素,而不是一个背景,所以你可以把它的大小到浏览器窗口。使用jQuery很容易。 – 2012-03-10 06:56:55

+0

谢谢。我的弹出框必须是固定大小?否则img将与弹出框重叠 – user782104 2012-03-10 07:08:42