CSS顯示圖像蒙版是一種非常酷的效果，它可以讓圖片變得更加生動有趣。在本文中，我們將簡單介紹如何使用CSS顯示圖像蒙版。
首先，我們需要創建一個包含圖片的容器。我們可以使用HTML中的標簽或CSS中的background-image屬性來設置圖片。例如：

<div class="image-container">
<img src="image.jpg" alt="Image">
</div>
或者
.image-container {
background-image: url('image.jpg');
}

接下來，我們需要為容器設置樣式，以創建圖像蒙版效果。我們可以使用CSS中的偽元素:after或:before來創建覆蓋圖像的半透明層。例如：

.image-container {
position: relative;
}
.image-container:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

在上面的代碼中，我們創建了一個半透明的圖層，覆蓋在圖片上面。我們使用了rgba顏色值來設置半透明度。其中，最后一個參數0.5是透明度值，可以根據需要進行調整。
除了純色覆蓋層之外，我們還可以使用SVG（可縮放矢量圖形）來創建更復雜的圖層。例如：

.image-container:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('mask.svg');
background-repeat: no-repeat;
background-size: 100% 100%;
mix-blend-mode: multiply;
}

在上面的代碼中，我們使用了一個名為mask.svg的SVG文件來作為蒙版。我們在CSS中設置了background-image屬性來引用SVG文件。我們還使用了mix-blend-mode屬性來指定顏色混合模式。在這種情況下，我們使用了“multiply”模式來將蒙版與圖像相混合。
最后，我們可以使用其他CSS屬性，如文字或圖片的淡入淡出，來增強效果。例如：

.image-container:hover:after,
.image-container:hover:before {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}

在上面的代碼中，我們使用了:hover偽類來指定當鼠標懸停在容器上時應用的樣式。我們使用了opacity屬性來設置透明度，并使用transition屬性來創建淡入淡出效果。
總之，CSS顯示圖像蒙版是一種非常酷的效果，可以使你的圖像變得更加生動有趣。通過使用簡單的HTML和CSS代碼，您可以輕松地創建自己的圖像蒙版效果。