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

使用磨砂玻璃效果制作覆盖div的所有方法通常只能根据图像背景（如http://www.blurjs.com/）进行此操作。有没有办法在HTML内容上实现磨砂玻璃浮动div（类IO7）

我想要做的是有一个浮动div（position:fixed），这将实现毛玻璃效果超过任何内容下面，无论是图片，文字，视频等。

这是在所有可能使用jQuery/JavaScript/HTML/CSS的任意组合？

到目前为止我发现的唯一的解决办法是这样的一个：

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

问题与这一个是它的速度很慢，因为它等待页面，所以不会做它的魔力之前，首先呈现在高流量网站上确实很好。

来源

2013-10-29 Mark

看看这个帖子：http://stackoverflow.com/questions/17089927/how-to-create-a-frosted-glass-effect-using-css – bitoffdev

回答我的问题。看来这不能在这个时候以动态的方式完成。未来有可能对Chrome进行有希望的更改，但目前这一切都在开发阶段。

现在，它只能伪造静态内容。

来源

2014-01-04 19:05:40 Mark

我接过了@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-29 02:16:43 PaulProgrammer

+1为小猫:) – jasonscript

这只是模糊预设图像，但这不适用于尝试将浮动div放在混合文本，图像，视频内容的顶部 – Mark

我认为，因为您必须执行一些画布工作来捕捉div后面的图像并对其进行处理。祝你好运，特别是在视频上。 – PaulProgrammer

这是你想要的吗？检查 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-29 02:42:36 Tejas

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

回答

相关问题