CSS背景圖可以為網站添加美觀的視覺效果。但是，有時候我們需要在背景圖上加背景顏色，以使網站更加突出。下面就是一些關于如何在CSS背景圖上加背景顏色的技巧。 1. 使用透明度（opacity）屬性 我們可以使用透明度屬性將背景圖和背景顏色融合起來。透明度通常設置為0.5或更低，以使背景顏色在看上去不那么顯眼的同時，也不會完全遮蓋掉背景圖。我們可以使用以下代碼來實現這個效果：

p {
background-image: url('bg-image.jpg');
background-color: #f0f0f0;
opacity: 0.5;
}

2. 使用偽元素（pseudo-elements） 我們也可以使用偽元素來實現在CSS背景圖上加背景顏色的效果。我們可以使用::before或::after偽元素來添加一個透明的背景層，并使其覆蓋在背景圖的頂部。以下是實現這個效果的代碼：

p {
position: relative;
background-image: url('bg-image.jpg');
}
p::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f0f0f0;
opacity: 0.5;
}

3. 使用多背景圖（multiple backgrounds） 最后一個技巧是使用多背景圖。我們可以同時為一元素設置多個背景圖和背景顏色。這意味著我們可以為不同的背景圖和背景顏色分別設置透明度，以使它們可以融合在一起。以下是實現這個效果的代碼：

p {
background-image: url('bg-image-1.jpg'), url('bg-image-2.jpg');
background-color: #f0f0f0, #000;
background-size: cover;
background-position: center center;
background-blend-mode: multiply;
opacity: 0.5;
}

在上面的代碼中，我們為p元素設置了兩個背景圖和兩種背景顏色。我們還使用background-blend-mode屬性將它們混合在一起。 總結： 這些技巧可以幫助我們在CSS背景圖上加背景顏色，從而使網站更加美觀和突出。我們可以根據需要選擇不同的方法，使我們的網站看起來更棒！