在網(wǎng)頁設(shè)計中，使用圖片作為背景是非常常見的。但是，在使用 CSS 設(shè)置背景圖片時，我們可能會遇到這樣的情況：圖片只顯示了一部分，而并非全部顯示出來。這是因為 CSS 默認會將背景圖片的大小設(shè)置為容器的大小，如果容器大小小于圖片大小，就會出現(xiàn)圖片被裁剪的情況。

那么，如何讓 CSS 背景圖片全部顯示呢？想必這是讓很多設(shè)計師頭疼的問題。其實，解決這個問題有多種方法。

.background {
background-image: url("example.jpg");
background-size: cover;
}

方法一：使用 background-size 屬性。在 CSS3 中，background-size 屬性可以設(shè)置背景圖片的大小，前提是該屬性值不是默認的 auto。使用 cover 值可以讓背景圖片完全覆蓋整個容器，這樣不論容器大小與圖片大小的差異如何，圖片都可以完整地展示出來。

.background {
background-image: url("example.jpg");
background-repeat: no-repeat;
background-position: center center;
}

方法二：使用 background-position 屬性。如果想保持圖片的原始尺寸，同時又想讓圖片在容器中居中顯示，可以使用 background-position 屬性。將該屬性值設(shè)置為 center center，就可以讓圖片在容器中水平垂直居中顯示，而不會被裁剪。

無論使用哪種方法，都可以讓 CSS 背景圖片全部顯示出來。希望這篇文章對網(wǎng)頁設(shè)計師們有所幫助。