整个页面都是玻璃窗格

Glass pane all over the page

本文关键字：玻璃窗更新时间：2023-09-26

有没有一种简单的方法可以在HTML页面上设置一个"玻璃窗格"，而不考虑缩放/幻灯片事件/平台/浏览器｛移动/桌面｝？

我所说的"简单"指的是纯粹的CSS支持，而不是插件。

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

感谢

如果你只是指在所有东西之上的一层，那么试试这个：

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

如果希望opacity: 0.5;为半透明，则可以将其设置为"1"。

jsFiddle示例

我会用一个类来做这件事。

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

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

我最近发布了一个使用这种效果的Chrome扩展（这里是源代码）。

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

没有找到相关文章