CSS中同時(shí)設(shè)置背景圖片和背景顏色

在CSS中，我們可以使用background-image屬性來(lái)設(shè)置背景圖片，使用background-color屬性來(lái)設(shè)置背景顏色，如果我們同時(shí)設(shè)置這兩個(gè)屬性，那么背景圖片將會(huì)覆蓋在背景顏色之上，也就是說(shuō)，我們只能看到背景圖片，而看不到背景顏色。

如果我們想要讓背景顏色和背景圖片同時(shí)顯示出來(lái)，那么我們可以使用CSS的background屬性，這個(gè)屬性可以接收多個(gè)值，我們可以將背景圖片和背景顏色同時(shí)傳遞給它。

div {
  background: url('image.png') #ff0000;
}

上面的代碼會(huì)將image.png圖片設(shè)置為div的背景，并且背景顏色為紅色，我們可以根據(jù)需要調(diào)整圖片和顏色的值，需要注意的是，如果圖片和顏色都提供了，那么圖片將會(huì)覆蓋在顏色之上，也就是說(shuō)，我們?nèi)匀恢荒芸吹綀D片，而看不到顏色。

我們還可以使用CSS的mix-blend-mode屬性來(lái)調(diào)整圖片和顏色的混合模式，我們可以將混合模式設(shè)置為multiply，這樣圖片和顏色就會(huì)相乘在一起，從而生成一種新的顏色，不過(guò)需要注意的是，這個(gè)屬性在早期的瀏覽器版本中可能不被支持，在使用它之前，我們需要先確認(rèn)一下目標(biāo)瀏覽器是否支持這個(gè)屬性。