有時候在網頁設計中，我們會希望使用一個背景圖或背景色讓整個頁面更加美觀。但是，有時候我們發現使用背景色時，它被背景圖遮住了。該怎么辦呢？

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

在上面的代碼中，我們使用了一個背景圖作為頁面的背景圖片，并且使用白色作為后備的背景色。然而，在實際應用中，我們會發現背景色并沒有顯示出來，反而被背景圖遮住了。這是因為背景圖是在背景色的后面顯示的，當網頁滾動時，背景圖會完全遮住背景色。

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

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

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

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

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;
}

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

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