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

我想创建一个div固定在一个位置并使其半透明 - 使其后面的内容部分可见且模糊。我正在寻找的风格类似于div中的“查看全部”缩略图苹果网站 http://www.apple.com/.

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

注：div位置固定，背景滚动。斯科尔斯的背景是文字和照片的混合。

CSS

CSS 3 有一个模糊滤镜（目前只有 webkit 2014 年 11 月 https://developer.mozilla.org/en-US/docs/Web/CSS/filter):

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

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

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

请在此处查看一些有关模糊和其他滤镜的精彩演示。 http://html5-demos.appspot.com/static/css/filters/index.html

备查这是 CSS 过滤器的兼容性表 http://caniuse.com/#feat=css-filters。 Firefox 似乎在 v35+ 中获得了该功能，而甚至 IE11 似乎也没有任何兼容性。

SVG

另一种方法是使用 svg (基本上 IE9 及以上版本都是安全的 http://caniuse.com/#feat=svg):

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 演示 http://jsfiddle.net/for3st/829k0nkh/

JavaScript

您将获得与 javascript 最高的浏览器兼容性，但通常性能最慢，并且会增加 js 的复杂性。

• http://www.blurjs.com/ http://www.blurjs.com/（jquery 插件，canvas 解决方案，支持 IE9+、FF、Chrome http://caniuse.com/#feat=canvas)
• http://nbartlomiej.github.io/foggy/ http://nbartlomiej.github.io/foggy/(jquery插件IE8+,FF,Chrome支持)