CSS 圖片加顏色蒙板是一種很常用的技術，它可以讓我們在網頁中更好的呈現圖片，并且更加突出圖片的主題。下面我們來看一下如何實現這個效果。 首先，我們需要先將圖片加載進來，然后使用 CSS 的 `background-image` 屬性來將圖片作為背景。我們還可以使用 `background-size` 屬性來設置背景尺寸，以適應不同設備的屏幕。

.image {
background-image: url("path/to/image.jpg");
background-size: cover;
}

接下來，我們可以為圖片添加一個顏色蒙板。這樣，當用戶將鼠標移動到圖片上時，圖片會變成灰色，這樣可以更好地突出圖片的主題。我們可以使用 `::before` 偽元素來創建這個蒙板，并使用 `opacity` 屬性來設置透明度，使其呈現出所需要的顏色。

.image {
/* ... */
position: relative;
}
.image::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
}
.image:hover::before {
opacity: 1;
}

最后，我們只需要將 `.image` 類添加到所需要的 `` 元素或 `