CSS 遮蓋層中間高亮是一個(gè)常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)效果，它能夠使得一個(gè)區(qū)域突出顯示，顯示出更加精彩的內(nèi)容。下面我們來(lái)看看如何使用 CSS 實(shí)現(xiàn)這個(gè)效果。

/* HTML 代碼 */
<div class="overlay">
<h2>中間高亮</h2>
<p>這是一個(gè)遮蓋層中間高亮的效果。</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 來(lái)創(chuàng)建一個(gè)遮蓋層。該元素位于 div 中間，覆蓋整個(gè) div 區(qū)域。我們將它的背景設(shè)置為白色半透明，這樣可以使得遮蓋層下面的內(nèi)容若隱若現(xiàn)。同時(shí)，我們將 h2 和 p 元素的 z-index 都設(shè)為 2，使得它們顯示在遮蓋層上面。

這樣，我們就成功地實(shí)現(xiàn)了一個(gè) CSS 遮蓋層中間高亮的效果，讓頁(yè)面更加美觀和吸引人。