這篇文章為你介紹使用css實現網頁遮罩效果,主要是透過控制兩個盒子的顯示層級,控制遮罩層的背景色和顯示透明度來達到遮罩效果。希望對學習css的朋友有幫助。
給你的彈跳窗加個遮罩
遮罩層效果相信是許多開發需求時候常常會碰到的一個情況,實現遮罩層效果的方式有很多種,下面介紹最簡單的一種,利用CSS來實現遮罩
dom節點程式碼:
<!-- 进度条遮罩 --> <t:p id="shade" styleClass="shade" > </t:p>
CSS樣式程式碼
.ui-progressbar{ position: absolute; top:40%; left:40%; z-index: 99999999; width:500px; height:22px; line-height:22px; display:none; } .ui-progressbar-value { background-image: url("../images/pbar-ani.gif"); border:0px; } .shade { background:rgba(0, 0, 0, 0.4); width:100%; height:100%; position: absolute; z-index:99; left:0px; top:0px; opacity:0.6; filter:alpha(opacity=60); display:none; }
主要是透過控制兩個盒子的顯示層級,控制遮罩層的背景色和顯示透明度來達到遮罩效果。
以上是給你的網頁彈跳窗加個遮罩的詳細內容。更多資訊請關注PHP中文網其他相關文章!