如何使用CSS创建磨砂玻璃效果？

Question

我想创建一个div固定在一个位置并使其半透明的东西 - 使其后面的内容部分可见和模糊.我正在寻找的风格类似于Apple网站div上的"全部查看"缩略图.

我唯一能做的就是调整,opacity: 0.9但我无法模糊下面的内容div.

注意:div具有固定位置并且背景滚动.scolls的背景是文字和照片的混合.

Answer 1

CSS

CSS 3有一个模糊过滤器(2014年11月只有webkit):

-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/

IE 4-9支持非标准过滤器

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')

在这里查看模糊和其他过滤器的一些很好的演示.

以下参考是CSS过滤器的兼容性表.Firefox似乎在v35 +中获得该功能,而即使IE11似乎也没有任何兼容性.

SVG

另一种方法是使用svg(基本上是IE9及以上版本的安全版):

filter: url(blur.svg#blur);

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg> 

jsFiddle演示

使用Javascript

您将获得与javascript最高的浏览器兼容性,但通常是最慢的性能和增加的js的复杂性.

• http://www.blurjs.com/(jquery插件,画布解决方案所以IE9 +,FF,Chrome支持)
• http://nbartlomiej.github.io/foggy/(jquery插件IE8 +,FF,Chrome支持)

Answer 2

您可以使用CSS图像过滤器.

-webkit-filter: blur(2px);
filter        : blur(2px);

有关CSS图像过滤器的更多信息:

• http://techstream.org/Web-Design/CSS3-Image-Filters
• http://html5-demos.appspot.com/static/css/filters/index.html

演示:JSFIDDLE

但实际上,他们正在使用预处理的JPG,并且只是将其用作正确位置的叠加层.

#background {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;

    background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
    background-position: 0 0;
}
#blur {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 120px;
    height: 500px;

    background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
    background-position: -50px -50px;
}

<div id="background">
    <div id="blur"></div>
</div>

演示:JSFIDDLE