整个页面的玻璃窗格答案

【问题标题】：Glass pane all over the page整个页面的玻璃窗格
【发布时间】：2012-02-23 04:01:04
【问题描述】：

是否有一种简单的方法可以在整个 HTML 页面上放置一个“玻璃窗格”，而不考虑缩放/滑动事件/平台/浏览器{mobile/desktop}？

“简单”是指纯 CSS 支持，而不是插件。

回退：插件建议也可能有用。

谢谢

【问题讨论】：

你的意思是在一切之上有一层吗？

标签： javascript html css mobile

【解决方案1】：

如果您只是指在一切之上的一层，试试这个：

#top-layer {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
}

如果你想要半透明，你可以设置opacity: 0.5;。

A jsFiddle example

【讨论】：

在这种情况下height 将仅与视口相关，我希望也支持滚动事件（即向下滚动后，玻璃窗格应保持可见，而不仅仅是向上移动） .
你知道吗？fixed 它也支持移动浏览器吗？ iOS5 上的 AFAIK Mobile Safari 可能有问题。
IOS5 has support for position: fixed;，其他移动平台可能会投诉，所以你可以使用iScroll
查看this solution 或按照我的建议使用iScroll。

【解决方案2】：

玻璃板？试试这个 CSS：

div#glassPane {
   height: 98%;
   width: 98%;
   border: 1px solid rgba(0,0,0,0.5);
   border-radius: 10px;
   background: rgba(0,0,0,0.25);
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   position: fixed;
   top: 1%;
   left: 1%;
}

查看示例：http://jsfiddle.net/vLTWK/

【讨论】：

是的，我刚刚回答了——你指的是什么？
我指的是这样一个事实，即他不仅仅指有样式的玻璃窗格。但是我可以看到您现在已经编辑了您的问题，以包括他所说的固定定位。
啊 - 你指的是关于“幻灯片”的那部分？
看起来很漂亮！但在 Android 上不占整页（仅占一小部分 - 刚刚检查）
我希望我能解释一下移动浏览器的行为。

【解决方案3】：

我会使用一个类来做到这一点。

div.glass-pane {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

您可以更改高度、宽度、顶部和左侧位置，以使“玻璃窗格”仅适合特定区域。您也可以添加一些颜色（rgba 或 hsla 将是最好的并创建玻璃效果）。如果您想在窗格顶部创建模态框，z-index 将有所帮助。然后只需使用 jQuery 来添加点击事件。

我最近发布了一个使用此效果的Chrome Extension (here is the source)。

【讨论】：