2

磨砂玻璃效果叠加的所有方法div，通常只能基于图像背景（例如http://www.blurjs.com/）。

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

使用 jQuery/JavaScript/HTML/CSS 的任何组合都可能吗？

到目前为止，我发现的唯一解决方案是这个：

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

这个问题是它非常慢，因为它会等待页面首先呈现，然后才能发挥它的魔力，因此在高流量网站上不会真正运作良好。

4

3 回答 3

1

我采用了@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“后面”的东西，如果你制作了一个“可拖动”对话框——因为你可能需要做画布工作。

于 2013-10-29T02:16:43.803 回答
1

回答我自己的问题。目前看来，这不能以动态方式完成。chrome 有一些有希望的变化以允许在未来实现这一点，但目前它还处于开发阶段。

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

于 2014-01-04T19:05:40.043 回答
0

这是你想要的吗？？？？？检查 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);
于 2013-10-29T02:42:36.130 回答