整個頁面的CSS過濾器

我想知道如果我可以在整個頁面上放置一個css過濾器，以便您可以看到該頁面，但它頂部有一個灰色的過濾器，並且由於過濾器在最上面。整個頁面的CSS過濾器

2011-01-26 DonJuma

這可以通過在你的DOM的底部放置一個空的疊加DIV（<div id="overlay"></div>），用下面的風格來實現：

#overlay { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: #000; 
    opacity: .6; 
    filter: alpha(opacity=60); 
}

你需要小心，如果您有任何聲明Z-索引。另外，在文檔高度大於視口的情況下，疊加div可能需要一些JavaScript處理。

來源

2011-01-26 20:28:43 Chris

我只是把它放在沒有z-index的DOM底部嗎？或者我把它直接放在標籤之間，以便覆蓋整個頁面？ – DonJuma 2011-01-26 20:30:17

如果有其他絕對定位元素，則可能需要z-index。 – Spliffster 2011-01-26 20:30:31

HTML（把這個頁面的底部）：

<div id="overlay"></div>

CSS：

#overlay { 
    position:fixed; 
    z-index: 100; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    background-color:rgba(0,0,0,0.2); 
}

如果你想支持向後瀏覽器（IE8及以下），你必須重新調整代碼。例如，IE中不支持RGBA。

來源

2011-01-26 20:29:25

整個頁面的CSS過濾器

回答

相關問題