今天我們來講一下CSS圖片顏色疊加效果。這個效果可以讓我們在圖片上疊加一層顏色，使得圖片的色彩更加豐富。使用這個效果，我們可以讓頁面顯得更加生動，同時也可以減少圖片的使用，從而達到優化頁面的效果。 首先，讓我們看一下實現這個效果的CSS代碼：

.img-overlay {
position: relative;
}
.img-overlay::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000000;
opacity: 0.5; /* 可以根據實際需求來設置透明度 */
z-index: 1;
}
.img-overlay img {
position: relative;
z-index: -1;
}

代碼解析： 我們首先將包含圖片的容器設為相對定位（position: relative;）。然后，我們使用偽元素（::before）創建一個全屏的覆蓋層，它的顏色我們設置為黑色（background-color: #000000;）。我們將覆蓋層的透明度設置為0.5（opacity: 0.5;），以保證圖片在覆蓋層之下能夠輕松地可見。最后，我們將覆蓋層的z-index設為1，將圖片的z-index設為-1，這樣就可以將圖片放在覆蓋層之下了。 使用這個效果，我們可以很容易地給圖片增加一層顏色，從而使得圖片更加生動。這個效果也可以用來實現其他的效果，例如：使得圖片變得更加明亮或者更加模糊等等。不僅如此，這個技巧還可以用來在頁面中減少圖片的使用，從而優化頁面加載速度。 希望這篇文章能夠對你有所幫助。如果你有其他有趣的CSS技巧，歡迎在評論區與我們分享。