現在全屏的半透明遮罩層在web2.0網站應用非常廣泛了，絕大多數遮罩是通過計算頁面大小，然后覆蓋一個與頁面同等大小的層實現，如騰訊qzone, wordpress后臺。這種方式本來無可非議，但是在頁面很長的時候在IE8下會失效（國外資料的解釋是與機器顯卡相關），有些完美情節的同學遇到這個問題后就抓破了頭，無奈之下甚至想讓IE8強制使用IE7的方式解析他的作品。其實我們有一個更好的方法，咱們用CSS去解決它！

還記得“position:fixed”嗎？它是css2的一個新增的屬性，他可以讓一個元素靜止在頁面上，拖動滾動條也不會動，如Qzone頂部固定的導航欄就是這樣實現的。同樣我們也可以用一個100%高寬的層覆蓋瀏覽器視口，這樣就可以實現全屏遮罩了。不用再計算頁面的大小，調整瀏覽器大小的時候也不要去動態修改尺寸了。

遮罩 CSS:

.divBG
{
background: gray;
position: fixed;
left: 0px;
top: 0px;
100%;
height: 100%;
display: none;
z-index: 20;
filter: alpha(opacity=60);
opacity: 0.6 !important;
}

彈出層 CSS:

.PopUp
{
position: fixed;
display: none;
z-index: 21 !important;
background-color: White;
900px;
border-style: solid solid solid solid;
border- 5px 5px 5px 5px;
border-color: #cccc99;
left: 50%;
top: 50%;
margin-top: -200px; /*--高度的一半--*/
margin-left: -450px; /*--寬度的一半--*/
}

---

http://xiangai.taobao.com

---

http://shop148612228.taobao.com

---

如果您覺得對您有幫助.領個紅包吧.謝謝.

---

---

總結

以上是生活随笔為你收集整理的CSS实现 全屏 遮罩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。