本文目錄導讀：

1. 背景圖片設置
2. 選擇合適的背景尺寸
3. 背景圖片定位
4. 背景重復設置
5. 實例演示

CSS技巧：***展示背景圖片，避免留白

背景圖片設置

在網頁設計中，我們經常使用CSS來設置背景圖片，為了確保背景圖片全覆蓋不留白，我們需要掌握一些關鍵的CSS屬性。

選擇合適的背景尺寸

使用CSS的background-size屬性，我們可以控制背景圖片的尺寸，為了確保背景圖片全覆蓋，可以選擇將背景尺寸設置為cover，這樣背景圖片就會等比縮放以覆蓋整個元素，不留空白。

background-size: cover;

背景圖片定位

當背景圖片尺寸大于元素尺寸時，可能會出現圖片部分內容無法顯示的情況，這時，我們可以使用background-position屬性來調整背景圖片的位置，通過組合使用水平和垂直方向的值（如center、top、bottom等），可以***控制背景圖片的顯示位置。

background-position: center center;

背景重復設置

默認情況下，背景圖片可能會重復以填充整個元素，為了避免這種情況，我們可以設置background-repeat屬性為no-repeat，這樣背景圖片就不會重復了。

background-repeat: no-repeat;

實例演示

假設我們有一個元素，我們希望其背景圖片***展示，不留白，我們可以這樣設置CSS：

element {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

通過以上設置，我們可以確保背景圖片***展示在元素上，不留空白，我們也需要注意選擇適合的背景圖片和合適的元素尺寸，以確保***佳的視覺效果。