除了直接在CSS中設置背景顏色或圖片以及透明度等屬性，jQuery中還提供了一種更方便且靈活的遮罩方式——利用div元素實現遮罩效果。
//HTML結構
<div class="mask"></div>
//CSS樣式
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,0.6); //背景顏色透明度為0.6
}
//jQuery代碼
$(".mask").fadeIn(); //顯示遮罩
$(".mask").fadeOut(); //隱藏遮罩通過設置div的固定定位，使其覆蓋在整個頁面上方，然后設置背景顏色透明度為0.6，即實現了一個半透明的黑色遮罩。在需要展示數據加載、彈出窗口等操作時，通過調用fadeIn()方法顯示遮罩，在操作完成后再調用fadeOut()方法隱藏遮罩。
另外，可以利用jQuery的append()方法在頁面中動態添加遮罩元素，避免了HTML結構中重復的div元素。
//HTML結構
<body>
//內容區域
</body>
//jQuery代碼
$("body").append("<div class='mask'></div>"); //動態添加遮罩除了以上基礎實現，還可以通過使用CSS3屬性進行更豐富的遮罩效果展示。例如，通過box-shadow屬性實現類似于彈出框陰影的效果。
//CSS樣式
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
box-shadow: 0 0 20px rgba(0,0,0,0.6); //添加陰影效果
}利用div元素實現遮罩效果，不僅簡單易懂、方便靈活，而且還能結合其他CSS屬性實現更為美觀的遮罩效果，非常值得開發者們嘗試使用。