給你的網頁彈跳窗加個遮罩

angryTom
發布: 2020-03-03 17:57:27
轉載
3903 人瀏覽過

這篇文章為你介紹使用css實現網頁遮罩效果,主要是透過控制兩個盒子的顯示層級,控制遮罩層的背景色和顯示透明度來達到遮罩效果。希望對學習css的朋友有幫助。

給你的網頁彈跳窗加個遮罩

給你的彈跳窗加個遮罩

遮罩層效果相信是許多開發需求時候常常會碰到的一個情況,實現遮罩層效果的方式有很多種,下面介紹最簡單的一種,利用CSS來實現遮罩

dom節點程式碼:

  
登入後複製

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中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!