在使用CSS樣式時，經常遇到背景圖片無法完整顯示的情況，下面我們通過一個實例詳細探討CSS背景圖顯示不完整的原因及解決辦法。

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

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

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

可以發現背景圖片并沒有完整顯示，在右側和底部出現了空白。這是因為默認情況下背景圖片是相對于元素的padding區域定位的，而我們設置的偏移量只是相對于背景圖片左上角的偏移，沒有考慮到padding區域的影響。

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

.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上部和左部分別設置為20像素和30像素，將背景圖片定位改為了相對于左上角的位置。修改后的效果如下：

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

可以看到，修改后的背景圖片完整顯示了，不存在顯示不完整的問題。細心的讀者也許會發現，這種解決方法只適用于背景圖片相對于元素左上角的情況，若需定位到其他位置則需做出相應的調整。

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