css 圖片加蒙板

在網頁設計中，經常需要對圖片進行加工和處理，讓它們更加適合頁面布局和風格。其中一種比較常見的處理方式是給圖片加蒙板。在 css 中，實現這個效果有多種方法，本文主要介紹一種比較簡單易懂的方式。

首先，需要用到兩張圖片：一張是原始圖片，一張是蒙板。這里以一張貓的圖片作為例子：

<div class="image-container">
<img src="cat.jpg" alt="cute cat">
<img src="mask.png" alt="mask">
</div>

圖片容器使用 div 標簽包裹，其中包含兩個 img 標簽，分別對應原始圖片和蒙板。接下來，需要對這兩個圖片進行一些 css 樣式的設置：

.image-container {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
img:first-child {
z-index: 1;
}
img:last-child {
z-index: 2;
mix-blend-mode: multiply;
}

首先，圖片容器設置為相對定位，為了讓后面設置的絕對定位樣式生效。然后，兩個圖片都設置絕對定位，左上角對齊，占據整個容器。這里需要注意，一定要先放原始圖片，再放蒙板，否則效果無法達到。

接下來，原始圖片的 z-index 設置為 1，蒙板圖片的 z-index 設置為 2，并使用 mix-blend-mode 屬性設置混合模式為 multiply。multiply 是一種將兩個圖層的顏色值相乘的混合模式，能夠產生非常特別的效果。

完成上述樣式設置后，效果如下圖所示：

.image-container {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
img:first-child {
z-index: 1;
}
img:last-child {
z-index: 2;
mix-blend-mode: multiply;
}