Javascript 有没有在HTML内容上实现磨砂玻璃浮动div（类似于IO7）

使用磨砂玻璃效果制作上覆的

div

的所有方法通常只能基于图像背景（例如）

我想做的是有一个浮动的

div

（

位置：fixed

），它将在下面的任何内容（无论是图像、文本、视频等）上实现磨砂玻璃效果

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

到目前为止，我找到的唯一解决方案是：

---

这一个的问题是，它的速度非常慢，因为它需要等待页面先呈现，然后再施展魔法，所以在高流量的网站上不会真正起作用。

我使用了@elliopizzaman提供的链接，并在一定程度上增强了小提琴。通过添加一个使图像变亮的div层，我可以获得一个霜状的玻璃外观。边缘不是您希望看到的，但是效果还可以

HTML:

---

我不知道过滤器是否会应用于div“后面”的某个对象，例如，如果您创建了一个“可拖动”对话框，那么您可能需要进行画布工作。

这是您想要的吗？？？？？检查 将以下内容更改为div

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

---

回答我自己的问题。目前看来，这无法以动态方式完成。chrome在未来会有一些很有希望的变化，但目前还处于开发阶段

---

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

查看这篇文章：这只是模糊了预设图像，b但这不适用于尝试在混合文本、图像、视频内容的顶部放置浮动div。我认为，为此，您必须进行一些画布工作，以捕获div后面的图像并对其进行操作。祝你好运，特别是在视频上。

#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);
}

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