色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3 透明蒙層

夏志豪2年前9瀏覽0評論

CSS3透明蒙層是指在網頁元素中使用一種遮罩層來實現透明效果,比如頁面中廣泛應用的遮罩層、彈出層等等。

代碼樣例:
/*透明蒙層遮罩層*/
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}

其中,rgba代表紅、綠、藍和透明度,數值范圍為0~255,透明度從0到1,0為完全透明,1為完全不透明。上述代碼中的0.5就是設置蒙層的透明度為50%。

遮罩層可以封裝成一個函數來實現彈層效果。這樣在需要使用的時候調用即可:

代碼樣例:
/*顯示彈出層*/
function showDialog() {
//顯示遮罩層
var mask = document.createElement('div'); //創建遮罩層
mask.className = 'mask'; //設置遮罩層樣式
document.body.appendChild(mask); //添加遮罩層到頁面
//顯示彈出層
var dialog = document.getElementById('dialog'); //獲取彈出層元素
dialog.style.display = 'block'; //顯示
}
/*隱藏彈出層*/
 function hideDialog() {
//隱藏遮罩層
var mask = document.querySelector('.mask'); //獲取遮罩層元素
document.body.removeChild(mask); //從頁面移除遮罩層
//隱藏彈出層
var dialog = document.getElementById('dialog'); //獲取彈出層元素
dialog.style.display = 'none'; //隱藏
}

使用CSS3透明蒙層,不僅可以實現彈出層效果、圖片遮罩,以及簡單的動畫效果也可以借助它實現。