整個頁面上的玻璃窗格

是否有一種簡單的方法可以在整個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

整個頁面上的玻璃窗格

回答

相關問題