在使用CSS樣式時(shí)，經(jīng)常遇到背景圖片無(wú)法完整顯示的情況，下面我們通過(guò)一個(gè)實(shí)例詳細(xì)探討CSS背景圖顯示不完整的原因及解決辦法。

.box{
width: 400px;
height: 200px;
background-image: url("image/bg.png");
background-repeat: no-repeat;
background-position: -20px -30px;
}

如上述代碼所示，我們?cè)O(shè)置了一個(gè)寬為400像素，高為200像素的div元素并添加了背景圖片，圖片位置為左偏移20像素，上偏移30像素。但實(shí)際顯示效果如下圖所示：

□□□□□□□□□
□□□□□□□□□
□□□□□□□□□
□□□□□□□□□
□□□□□□□□□
□□□□□□□□□

可以發(fā)現(xiàn)背景圖片并沒(méi)有完整顯示，在右側(cè)和底部出現(xiàn)了空白。這是因?yàn)槟J(rèn)情況下背景圖片是相對(duì)于元素的padding區(qū)域定位的，而我們?cè)O(shè)置的偏移量只是相對(duì)于背景圖片左上角的偏移，沒(méi)有考慮到padding區(qū)域的影響。

那么如何解決這個(gè)問(wèn)題呢？一種可行的方法是將背景圖片相對(duì)于元素的左上角定位，而不是相對(duì)于padding區(qū)域。方法如下：

.box{
width: 400px;
height: 200px;
padding: 20px 0 0 30px;
background-image: url("image/bg.png");
background-repeat: no-repeat;
background-position: 0 0;
}

我們將div元素的padding上部和左部分別設(shè)置為20像素和30像素，將背景圖片定位改為了相對(duì)于左上角的位置。修改后的效果如下：

□□□□□□□□□□
□□□□□□□□□□
□□□□□□□□□□
□□□□□□□□□□
□□□□□□□□□□
□□□□□□□□□□

可以看到，修改后的背景圖片完整顯示了，不存在顯示不完整的問(wèn)題。細(xì)心的讀者也許會(huì)發(fā)現(xiàn)，這種解決方法只適用于背景圖片相對(duì)于元素左上角的情況，若需定位到其他位置則需做出相應(yīng)的調(diào)整。

綜上可知，CSS背景圖顯示不完整是由于默認(rèn)情況下背景圖片是相對(duì)于元素的padding區(qū)域定位的。解決辦法是將背景圖片相對(duì)于元素的左上角定位，或者將背景圖片的尺寸調(diào)整為與元素相同，使其完全覆蓋元素。希望這篇文章對(duì)您的CSS樣式編寫(xiě)有所幫助。