在網(wǎng)頁設(shè)計中， 色彩搭配是很重要的一部分。如果網(wǎng)站中出現(xiàn)適合網(wǎng)站主題的圖片，我們常需要用到另一種方式來對圖片進行色彩組合——為圖片填充顏色。在 CSS 中，我們可以使用 background-clip 和 background-color 兩個屬性實現(xiàn)圖片填充顏色的效果。 首先，我們需要通過 CSS 的背景屬性給圖片創(chuàng)建一個背景。background 屬性包含多個值，但是我們只需要利用 background-image 和 background-size 兩個值。

以下是設(shè)置背景圖片的樣式：

.img {
background-image: url(image.jpg);
background-size: cover;
}

以上代碼中，.img 是圖片的 CSS 選擇器，image.jpg 是我們想要設(shè)置為背景的圖片路徑。background-size: cover; 和 background-image 一起使用可以讓圖片自適應(yīng)窗口大小并保持全部尺寸。 接下來，我們將使用 background-clip 和 background-color 屬性來填充顏色。background-color 可以為我們指定背景顏色，background-clip 屬性決定背景的顏色空間是由哪個屬性來確定的。我們可以將這個屬性設(shè)置為 padding-box，border-box，content-box 或 text，以指定使用哪個范圍的顏色填充元素的背景。 以下是例子，p 元素是包含圖片的 HTML 元素，我們將使用 background-clip 和 background-color 屬性，將圖片填充為淡粉色。

以下是設(shè)置圖片填充顏色的示例：

p {
background-image: url(image.jpg);
background-size: cover;
background-color: rgba(255, 192, 203, 0.5); /*淡粉色*/
background-clip: padding-box;
}

因為我們想要在圖片外層填充顏色而不是在圖片本身上填充顏色，所以 background-clip 的值設(shè)置為 padding-box。background-color 的 rgba 值使用 0.5 的透明值以便圖片底部的紋理依舊能被看見。 總結(jié)：在 CSS 中使用 background-clip 和 background-color 屬性讓圖片可以被填充其它的顏色。使用上述代碼，您可以擁有更加豐富的顏色組合方式，提高您的網(wǎng)站的美感水平。