今天我們來談談 CSS 中的藍色遮罩效果。藍色遮罩在網頁設計中很常見，可以用于圖片、文字等元素的覆蓋，營造出清新、干凈的氛圍。 要實現藍色遮罩，可以通過 CSS 的偽類 ::before 或 ::after 來創(chuàng)建一個新元素，再使用 CSS 屬性 background-color 設置為藍色，并通過 opacity 屬性調整透明度。 接下來，我們來看一下示例代碼：

.p-mask {
position: relative;
display: inline-block;
}
.p-mask::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0070c0;
opacity: 0.5;
z-index: 1;
}

以上代碼中，首先設置 .p-mask 為相對定位，接著在 ::before 偽類中創(chuàng)建了一個絕對定位的元素，并設置它的大小位置以覆蓋整個 .p-mask 元素。然后通過設置 background-color 為 #0070c0（藍色）來達到藍色遮罩的效果，并通過 opacity 屬性將透明度設置為 0.5，使遮罩具有半透明的效果。最后通過 z-index 屬性將遮罩層級設置為比前面的內容高，以覆蓋前面的元素。 在 HTML 中使用這個藍色遮罩效果可以簡單地將 .p-mask 的 class 應用到需要遮罩的元素上，例如：

這是一段需要遮罩的文本。

這樣就可以輕松實現了一個清新藍色的遮罩效果。當然，這只是藍色遮罩效果的簡單演示，還有更多的實現方法和更多元素之間的組合效果，希望大家能在實踐中不斷探索，發(fā)現更多有趣的遮罩效果。