CSS是我們網頁設計中必不可少的一部分。其中，設置圖片的顏色也是一項重要的操作。本文將會介紹如何通過CSS來設置圖片的顏色。

首先，我們需要在CSS中為圖片添加一個class或id來標識。例如，我們有一張圖片，代碼如下：

<img src="example.png" alt="example" />

在CSS中，我們可以通過以下方式添加class或id：

.example-img {
/* CSS樣式 */
 }
#example-img {
/* CSS樣式 */
 }

接下來，我們將會介紹兩種設置圖片顏色的方法：

方法一：濾鏡(filter)

濾鏡是CSS中用于設置圖片顏色的方法。我們可以通過設置不同的濾鏡，來達到不同的顏色效果。

.example-img {
filter: grayscale(100%); /* 灰度 */
filter: sepia(100%); /* 深褐色 */
filter: saturate(200%); /* 飽和度增加兩倍 */
filter: hue-rotate(90deg); /* 色相旋轉90度 */
filter: invert(100%); /* 反色 */
 }

方法二：顏色疊加(mix-blend-mode)

顏色疊加是CSS中另一種用于設置圖片顏色的方法。我們可以通過將顏色疊加在圖片之上，來改變圖片的顏色。

.example-img {
mix-blend-mode: color; /* 顏色疊加 */
background-color: blue; /* 背景色為藍色 */
 }

上述代碼將背景色設置為藍色，并將顏色疊加在圖片上，使圖片呈現出藍色調。

通過以上兩種方法的任意一種，我們就可以輕松設置圖片的顏色。希望這篇文章對您有所幫助！