是否可以在HTML内容(IO7类)上实现浮法浮法？

Question

所有制作具有磨砂玻璃效果的上覆div的方法，通常只能基于图像背景(如http://www.blurjs.com/)来实现。

我想要做的是有一个浮动div (position:fixed)，它将实现一个磨砂玻璃效果，无论是在下面的任何内容，无论是图像，文字，视频等。

使用jQuery/JavaScript/HTML/CSS的任何组合都可能做到这一点吗？

到目前为止，我找到的唯一解决办法是这个：

http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

问题是，它的速度非常慢，因为它等待页面首先呈现之前，它的魔术，所以不会真正地工作在一个高流量的网站。

Answer 1

回答我自己的问题。在这个时候，这似乎是不可能以动态的方式完成的。有希望的改变，铬允许在未来，但它都在开发阶段，在这个时候。

目前，它只能在静态内容上伪造。

Answer 2

我接受了@elliopizzaman给出的链接，并稍微加强了小提琴。通过添加一个div层，使图像更加明亮，我可以获得一个霜冻的玻璃外观。边缘不是你所希望的，但效果是可以的。

http://jsfiddle.net/mNgQs/35/

HTML：

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

CSS：

#frost {
   position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;
    background: rgba(255,255,255,.4);    
}

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

    background-image: url(http://placekitten.com/200/300);

    -webkit-filter  : blur(8px);
    -moz-filter : blur(8px);
    -ms-filter  : blur(8px);
    -o-filter   : blur(8px);
    filter      : blur(8px);
}

我不知道过滤器是否会应用于“背后”div，如果你做了一个“可拖的”对话框--因为你可能要做帆布工作。

Answer 3

这就是你想要的吗？检查http://jsfiddle.net/mNgQs/36/，将以下更改为div

 -webkit-filter : blur(2px);
-moz-filter : blur(2px);
-ms-filter  : blur(2px);
-o-filter   : blur(2px);
filter      : blur(2px);