Question

是否有一种简单的方法可以在HTML页面上设置“玻璃窗格”，无论缩放/幻灯片事件/平台/浏览器{mobile / desktop}如何？

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

后备：插件建议也可能有用。

由于

Answer 1

如果您只想在所有内容上面加上一层，请尝试以下方法：

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

如果您希望半透明，可以设置opacity: 0.5;。

A jsFiddle example

Answer 2

我会用一堂课来做这件事。

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）。

Answer 3

玻璃窗格？试试这个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/

有关详情，请参阅此处：
http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/#glassbox

整个页面上的玻璃窗格

3 个答案: