在開發(fā)網(wǎng)頁(yè)的過(guò)程中，我們經(jīng)常會(huì)用到CSS的背景圖來(lái)美化頁(yè)面。但是有時(shí)候我們會(huì)遇到CSS背景圖被其他元素覆蓋的情況，這時(shí)候該怎么解決呢？

這種情況一般是由于CSS的層疊順序問(wèn)題造成的。在CSS中，每個(gè)元素都有一個(gè)層疊順序，也就是Z軸坐標(biāo)，數(shù)值越大，元素就越靠近用戶。而默認(rèn)情況下，背景圖是處于元素底部的，也就是Z軸坐標(biāo)最小的位置。所以如果其他元素的層疊順序比背景圖高，那么就會(huì)把背景圖覆蓋住。

解決這個(gè)問(wèn)題也很簡(jiǎn)單，可以通過(guò)改變?cè)氐膶盈B順序或者調(diào)整背景圖的位置來(lái)實(shí)現(xiàn)。具體方法如下：

/*1.改變?cè)氐膶盈B順序*/
.element{
position:relative;
z-index:1;
}
/*給需要顯示在頂部的元素設(shè)置一個(gè)更高的z-index值即可。*/
/*2.調(diào)整背景圖的位置*/
.element{
background-image:url('bg.jpg');
background-repeat: no-repeat;
background-position: center center;
}
/*調(diào)整背景圖的位置，使其不被其他元素覆蓋，將其放到中間，并且不重復(fù)顯示。*/

以上就是解決CSS背景圖被覆蓋的兩種方法，我們可以根據(jù)具體情況選擇其中一種或者兩種方式結(jié)合使用，來(lái)達(dá)到美化網(wǎng)頁(yè)的目的。