在網頁設計中，圖片和顏色的組合通常可以增加頁面的視覺吸引力。要實現這種效果，我們可以使用CSS技術，將顏色放在圖片上。本文將介紹如何在圖片上應用CSS顏色。

/* 創建具有背景圖像和顏色的 div 元素 */
div {
background-image: url("image.jpg");
background-color: #000;
}
/* 使用 background-blend-mode 實現顏色覆蓋 */
div {
background-image: url("image.jpg");
background-color: #000;
background-blend-mode: multiply;
}
/* 使用 mix-blend-mode 實現顏色覆蓋 */
div {
background-image: url("image.jpg");
mix-blend-mode: multiply;
background-color: #000;
}

首先，我們需要創建一個具有背景圖像和顏色的 div 元素。我們可以使用 background-image 屬性設置背景圖像，使用 background-color 屬性設置顏色。在這種情況下，我們將顏色設置為黑色 (#000)。

下一步是使用 background-blend-mode 屬性實現顏色覆蓋。這個屬性可以控制背景圖像和顏色的混合模式。在這個例子中，我們使用 multiply 模式，它將圖像和顏色混合在一起，產生一個更暗的效果。

還有一種方法是使用 mix-blend-mode 屬性來實現顏色覆蓋。這個屬性可以用于任何元素，并且可以將元素的顏色與其內容項混合。在這種情況下，我們將背景圖像設置為透明，然后使用 multiply 模式混合顏色和元素內容。

通過使用以上代碼，可以輕松實現在圖片上應用CSS顏色的效果。這個技術可以用于任何網頁設計項目，并且可以增強頁面的視覺吸引力。