CSS 遮蓋層中間高亮是一個常見的網頁設計效果，它能夠使得一個區域突出顯示，顯示出更加精彩的內容。下面我們來看看如何使用 CSS 實現這個效果。

/* HTML 代碼 */
<div class="overlay">
<h2>中間高亮</h2>
<p>這是一個遮蓋層中間高亮的效果。</p>
</div>
/* CSS 代碼 */
.overlay {
position: relative;
overflow: hidden;
}
.overlay::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
z-index: 1;
}
.overlay h2,
.overlay p {
position: relative;
z-index: 2;
}
.overlay h2 {
margin-top: 0;
}

上述代碼中，我們使用了 CSS 的偽元素 ::before 來創建一個遮蓋層。該元素位于 div 中間，覆蓋整個 div 區域。我們將它的背景設置為白色半透明，這樣可以使得遮蓋層下面的內容若隱若現。同時，我們將 h2 和 p 元素的 z-index 都設為 2，使得它們顯示在遮蓋層上面。

這樣，我們就成功地實現了一個 CSS 遮蓋層中間高亮的效果，讓頁面更加美觀和吸引人。