整个页面上的玻璃窗格

是否有一种简单的方法可以在整个HTML页面上放置“玻璃窗格”，而不管放大/滑动事件/平台/浏览器{mobile/desktop}？ “容易”我的意思是像纯粹的CSS支持，而不是一个插件。整个页面上的玻璃窗格

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

感谢

2012-01-31 BreakPhreak

你的意思是说一切都在一层之上吗？ – MMM 2012-01-31 12:25:56

@MMM：是的。谢谢。 – BreakPhreak 2012-01-31 12:32:23

如果你仅仅意味着一切之上的一层，试试这个：

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

您可以设置opacity: 0.5;如果你想让它半透明的。

A jsFiddle example

来源

2012-01-31 12:28:40 MMM

在这种情况下，'height'只与视口有关，我希望也支持滚动事件（即向下滚动后，玻璃窗应该保持可见状态，而不仅仅是向上移动）。 – BreakPhreak 2012-01-31 12:32:10

那么，这是'位置：固定'为你...... – MMM 2012-01-31 12:33:37

你知道吗？会'固定'它也支持移动浏览器？ iOS5上的AFAIK Mobile Safari可能会有Probs。 – BreakPhreak 2012-01-31 12:36:37

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

来源

2012-01-31 12:31:22 Shane

他的意思是别的，阅读问题 – MMM 2012-01-31 12:41:04

是的，我只是回答了 - 你指的是什么？ – Shane 2012-01-31 12:42:14

我指的是他并不仅仅意味着一个风格化的玻璃窗格。但我可以看到你现在编辑了你的问题，包括他正在谈论的固定位置。 – MMM 2012-01-31 12:44:39

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

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

来源

2012-01-31 13:38:06 jjNford

整个页面上的玻璃窗格

回答

相关问题