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

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

遮罩 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

---

如果您覺得對(duì)您有幫助.領(lǐng)個(gè)紅包吧.謝謝.

---

---

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。