CSS圖片漸變蒙板是一種常見的實現方式，它可以將一張圖片添加蒙板效果，使其逐漸消失或者淡出。下面我們來看一下如何使用CSS實現圖片漸變蒙板。

/* HTML代碼 */
<div class="img-wrap">
<img src="example.jpg" alt="">
</div>
/* CSS代碼 */
.img-wrap {
position: relative;
display: inline-block;
}
.img-wrap::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

首先，我們需要將圖片包裹在一個div元素中，并將其設置為相對定位。接著，我們使用偽元素before來創建一個占位蒙板，將其設置為絕對定位并放置于圖片下方。這個蒙板采用漸變的背景色，從透明到白色。這樣就能夠實現圖片從底部逐漸淡出的效果。

需要注意的是，這個蒙板的高度是與圖片相同的，如果圖片超出了它的父元素，那么蒙板也會隨之擴展。此時，我們需要為圖片的父元素設置overflow:hidden來防止蒙板擴展到不該展開的區域。

除了從底部逐漸淡出外，我們還可以使用不同的漸變方向來實現不同的效果。例如，如果我們將漸變方向設置為“to right”，則能夠實現從左側逐漸淡出的效果。

.img-wrap::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

總的來說，CSS圖片漸變蒙板是一個非常實用的效果，它可以提供更好的視覺效果和用戶體驗。希望本文能夠對您有所幫助。