CSS 背景圖適配屏幕是我們在設計網站的時候經常會遇到的一個問題。如何讓不同尺寸的設備都能夠完美地展現我們的網站背景圖呢？下面就讓我們來看看如何使用 CSS 來實現。

background-image:url(bg.jpg);
background-size:cover;

以上是一個簡單的 CSS 片段，它實現了背景圖的自適應尺寸。首先，我們指定了背景圖的路徑。然后，我們使用了background-size:cover;屬性。這個屬性告訴瀏覽器將背景圖縮放到適應整個容器。不管用戶用的是小屏幕的手機還是大尺寸的電腦屏幕，都能夠完美地展現我們的背景圖。

有時候，我們不希望背景圖完全覆蓋整個容器。我們希望它能夠按照一定的比例縮放，保留一些白色的區域。我們可以用以下 CSS 屬性來實現：

background-image:url(bg.jpg);
background-size:contain;
background-repeat:no-repeat;
background-position:center;

這個 CSS 片段可以讓背景圖在不變形的情況下縮放到適應容器，并保留一定的白邊。這個效果非常適用于展示大尺寸的照片或者廣告。

總結一下，CSS 可以輕松實現背景圖的自適應尺寸。我們可以使用background-size:cover;屬性來讓背景圖完美適應整個容器，也可以使用background-size:contain;屬性來讓背景圖按比例縮放并保留一定的白邊。以上兩者都可以幫助我們在不同屏幕下展現完美的背景圖。