有時(shí)候在網(wǎng)頁(yè)設(shè)計(jì)中，我們會(huì)希望使用一個(gè)背景圖或背景色讓整個(gè)頁(yè)面更加美觀。但是，有時(shí)候我們發(fā)現(xiàn)使用背景色時(shí)，它被背景圖遮住了。該怎么辦呢？

body {
background-image: url("bg.jpg");
background-color: #ffffff;
}

在上面的代碼中，我們使用了一個(gè)背景圖作為頁(yè)面的背景圖片，并且使用白色作為后備的背景色。然而，在實(shí)際應(yīng)用中，我們會(huì)發(fā)現(xiàn)背景色并沒(méi)有顯示出來(lái)，反而被背景圖遮住了。這是因?yàn)楸尘皥D是在背景色的后面顯示的，當(dāng)網(wǎng)頁(yè)滾動(dòng)時(shí)，背景圖會(huì)完全遮住背景色。

那么，該如何解決這個(gè)問(wèn)題呢？我們可以使用下面的代碼來(lái)避免背景色被背景圖遮住的情況：

body {
background-image: url("bg.jpg");
background-color: #ffffff;
background-blend-mode: lighten;
}

在代碼中，我們使用了一個(gè)非常有用的屬性background-blend-mode，它可以控制背景圖片和背景色之間的混合模式。在這個(gè)示例中，我們使用了“l(fā)ighten”模式。這個(gè)模式會(huì)讓背景圖片“變亮”，以便更好地顯示背景色。

另外一個(gè)解決方法是使用偽元素。在下面的代碼中，我們使用after偽元素來(lái)覆蓋整個(gè)頁(yè)面，并設(shè)置背景色：

body {
background-image: url("bg.jpg");
position: relative;
}
body::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
z-index: -1;
}

在這個(gè)方法中，我們使用了一個(gè)偽元素來(lái)覆蓋整個(gè)頁(yè)面，并設(shè)置了一個(gè)較低的z-index來(lái)確保偽元素在其他元素的后面。我們還將背景顏色設(shè)置為白色以覆蓋背景圖片。

綜上所述，我們可以使用background-blend-mode屬性或偽元素來(lái)解決背景色被背景圖遮住的問(wèn)題。這些方法都能夠確保背景色能夠正常顯示，使網(wǎng)頁(yè)看起來(lái)更加美觀。