在CSS中，我們?yōu)榫W(wǎng)頁添加背景圖是很常見的操作。但有時(shí)候，如果我們添加了其他的元素，比如div或者另一個(gè)元素，就會(huì)發(fā)現(xiàn)背景圖被遮擋了。下面就讓我們來看一下解決這個(gè)問題的方法。

/*
* 定義一個(gè)含有多個(gè)元素的div容器
*/
div {
width: 500px;
height: 500px;
}
/*
* 為這個(gè)div添加背景圖
*/
div {
background: url("https://example.com/bg-img.jpg");
}
/*
* 添加一個(gè)子元素并為它定義樣式
*/
div div {
width: 300px;
height: 300px;
background-color: white;
}

在上面的代碼中，我們定義了一個(gè)div容器，并為其添加了一個(gè)背景圖。但是，我們又添加了一個(gè)子元素并為其設(shè)定了背景顏色，這就導(dǎo)致了背景圖被遮擋的問題。想要解決這個(gè)問題，我們需要使用一個(gè)簡單的CSS屬性：z-index。

z-index屬性指定了元素的堆疊順序，它是一個(gè)整數(shù)值，數(shù)值越大的元素會(huì)被放置在更高的層級(jí)。為了將背景圖置于最上層，我們可以將其z-index設(shè)定為1，將子元素的z-index設(shè)定一個(gè)更小的值，比如-1，這樣我們就可以將背景圖顯示出來了。

/*
* 重新定義子元素的樣式，為其添加z-index屬性
*/
div div {
width: 300px;
height: 300px;
background-color: white;
z-index: -1;
}
/*
* 為div容器添加z-index屬性，確保其在最上層
*/
div {
background: url("https://example.com/bg-img.jpg");
z-index: 1;
}

通過上面的代碼，我們就能正確地顯示出背景圖了，同時(shí)還能保留子元素的顏色效果。