CSS中的圖片疊底（overlay）是一種優美的視覺效果，它可以通過將一張圖片“疊加”在另一張圖片上來實現。這種效果可以很好的突出圖片的主題，并在網頁中創造出獨特的視覺體驗。下面我們來看看怎么通過CSS實現圖片疊底效果。 首先，我們需要兩張圖片，一張作為背景圖，另一張作為遮罩層。我們可以通過CSS設置這兩張圖片，并將它們分別放在不同的div容器中。

<div class="bg-image">
<img src="background.jpg" alt="background image">
</div>
<div class="mask-image">
<img src="mask.png" alt="mask image">
</div>

接下來，我們需要設置CSS樣式來實現圖片疊底效果。我們可以通過定位、嵌套以及混合模式等技術來完成這個效果。 首先，我們需要將遮罩層圖片放在背景圖片上面，這可以通過設置它們的定位（position）來實現。我們可以同時將兩張圖片的容器設置為相對定位（position: relative），以便后面對它們進行絕對定位。

.bg-image, .mask-image {
position: relative;
}
.mask-image {
position: absolute;
top: 0;
left: 0;
}

接下來，我們需要將遮罩層和背景圖片重疊在一起，這可以通過將它們放在同一個div容器中，并使用CSS混合模式（mix-blend-mode）來實現。混合模式可以讓我們設置兩個圖層的混合方式，包括正片疊底、差值、顏色濾鏡等效果。

.overlay {
mix-blend-mode: multiply;
}

最后，我們將遮罩圖片的容器置于背景圖片的下面，并將它們的混合模式設置為multiply。這樣就可以實現兩張圖片的疊底效果。

<div class="bg-image overlay">
<img src="background.jpg" alt="background image">
<div class="mask-image overlay">
<img src="mask.png" alt="mask image">
</div>
</div>

通過以上步驟，我們就可以實現一張圖片疊加在另一張圖片上的效果。僅僅只需一些CSS技巧，就可以創建出令人難以忘懷的視覺效果。