CSS圖片顏色疊加是一種常用的效果，它可以對圖片進行染色，讓圖片呈現出新的視覺效果。

.image-wrapper{
position: relative;
display: inline-block;
}
.image-wrapper::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 0, 0, 0.5); /* 期望的背景色 */
mix-blend-mode: overlay; /* 疊加模式 */
}
.image-wrapper img{
display: block;
}

上述代碼中，我們利用 ::before 偽元素在圖片上覆蓋一層顏色，并通過 mix-blend-mode 屬性使其與圖片疊加，以達到期望的效果。

下面我們以一張圖片為例，演示代碼的實現過程：

<div class="image-wrapper">
<img src="image.png" alt="image">
</div>

首先，我們需要將圖片所在的 div 容器設置為相對定位，并在該容器內添加 ::before 偽元素。

.image-wrapper{
position: relative;
display: inline-block;
}
.image-wrapper::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 0, 0, 0.5);
mix-blend-mode: overlay;
}

接下來，我們需要在 HTML 代碼中添加圖片，并給其添加一個 display:block 的樣式，用于消除默認的行內元素間隙。

.image-wrapper img{
display: block;
}

最終效果如下圖所示：

<div class="image-wrapper">
<img src="image.png" alt="image">
</div>