<div 遮罩效果是一種常用的網頁設計技術，它通過給元素添加一個遮罩層，可以實現各種視覺效果，例如模糊、透明、半透明等。在網頁設計中，遮罩效果常常被用于彈出框、圖片放大、輪播圖等場景。下面將通過幾個代碼案例詳細解釋說明div 遮罩效果的實現方法和應用。
第一個案例是一個簡單的彈出框遮罩效果。當用戶點擊按鈕時，彈出一個對話框，同時遮罩層覆蓋整個頁面。代碼如下：

html
<style>
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 5px;
}
</style>
<br>
<div class="modal">
<div class="modal-content">
<h2>彈出框標題</h2>
<p>這是一個彈出框的內容。</p>
<button>關閉</button>
</div>
</div>

在上面的代碼中，modal類定義了遮罩層的樣式，設置了position為fixed，使其固定在頁面上方。背景色設置為半透明的黑色，通過rgba函數可以控制不透明度，這里設置為0.5。使用flex布局將彈出框垂直居中顯示，justify-content和align-items的值都設置為center。modal-content類定義了彈出框的樣式，設置了背景色為白色，內邊距和邊框等。
第二個案例是一個圖片放大的遮罩效果。當用戶鼠標移入圖片時，顯示一個遮罩層，并放大圖片。代碼如下：

html
<style>
.image-container {
position: relative;
display: inline-block;
}
.image-container:hover .overlay {
opacity: 1;
}
.image-container:hover img {
transform: scale(1.2);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container img {
transition: transform 0.3s ease;
}
</style>
<br>
<div class="image-container">
<img src="example.jpg" alt="示例圖片">
<div class="overlay"></div>
</div>

在上面的代碼中，image-container類定義了圖片容器的樣式，設置了position為relative，以便于子元素.overlay的絕對定位。.image-container:hover .overlay和.image-container:hover img的樣式定義了當鼠標移入時的效果，.overlay的opacity設置為1，實現遮罩層的顯示，img的transform屬性設置為scale(1.2)，實現圖片放大的效果。.overlay類定義了遮罩層的樣式，設置了position為absolute，使用rgba函數設置背景色為半透明黑色。opacity設置為0，使用CSS過渡效果（transition）讓遮罩層的顯示效果漸變。
以上是兩個div遮罩效果的案例，通過給元素添加遮罩層，可以實現豐富多樣的視覺效果。在實際項目中，可以根據需求進行適當的樣式調整和功能增加，以達到更好的用戶體驗。希望本文能夠對讀者理解和應用div遮罩效果提供一些幫助。