在網頁設計中，經常會使用CSS背景圖來美化頁面。但是，如果CSS的背景圖超出了盒子的高度，就會出現不美觀的情況。下面我們來分析一下這種情況以及解決方法。

代碼示例：
<div class="box" style="height:200px;width:200px;background:url('bg.jpg') no-repeat center;"></div>

在上面的代碼中，我們給一個200*200像素的盒子添加了一個背景圖，但是這個背景圖的高度超出了盒子的高度。運行這個代碼，我們可以看到，盒子的高度仍舊是200像素，因此，我們只能看到背景圖中的一部分，其他部分被盒子的邊界裁剪了。

那么，怎么解決這個問題呢？其實有兩種常見的解決方法：

• 將盒子的高度設為背景圖的高度

代碼示例：
<div class="box" style="height:500px;width:200px;background:url('bg.jpg') no-repeat center;"></div>

• 使用background-size屬性調整背景圖的大小

代碼示例：
<div class="box" style="height:200px;width:200px;background:url('bg.jpg') no-repeat center;background-size:cover;"></div>

第一種方法是將盒子的高度直接設為背景圖的高度。這種方法比較簡單，并且可以確保整個背景圖都能完整顯示出來。但是，如果圖片的高度比盒子的高度小，就會出現空白的情況。

而第二種方法是使用background-size屬性調整背景圖的大小，讓它自適應盒子的大小。這個屬性有三個值：cover、contain和具體的尺寸，分別代表自適應并覆蓋整個背景區域、自適應并完全包含在背景區域內以及具體的寬度和高度。這種方法比較靈活，可以根據實際情況進行調整。

綜上所述，CSS的背景圖超出了盒子的高度，可以通過將盒子的高度設為背景圖的高度或使用background-size屬性來解決。在實際開發中，應根據實際情況選擇合適的解決方法。