CSS背景圖隨容器改變大小的方法
CSS背景圖是網頁設計中常用的元素之一，可以讓網頁更加美觀和吸引人。一般情況下，我們會使用一個固定寬度和高度的容器來顯示背景圖，但是當容器尺寸發生變化時，背景圖就會顯示不完整或者拉伸變形。那么如何實現CSS背景圖隨容器動態改變大小呢？以下是一些實現方法。
1.使用background-size屬性
background-size屬性用來設置背景圖像的大小。默認情況下，背景圖像大小是按照原圖的尺寸來顯示的。但是，在CSS3中，background-size屬性加入了contain和cover兩個新值。contain值可以讓背景圖像完整地顯示在容器內，而cover值可以讓背景圖像完全覆蓋容器。
例如，我們定義了一個寬度為300px、高度為200px的容器，并使用了一個寬度為500px、高度為400px的背景圖像。我們可以使用如下的CSS代碼：

div {
width: 300px;
height: 200px;
background-image: url(bg.png);
background-size: contain;
}

這樣，當容器尺寸發生變化時，背景圖會隨之動態改變大小，并保證圖像完整地顯示在容器內。
2.使用background-position屬性
background-position屬性用于設置背景圖像相對于容器的位置。它有兩個值，分別是水平和垂直方向上的偏移量，可以使用像素（px）、百分比（%）或關鍵詞（left、center、right、top、bottom）來表示。當我們需要縮放背景圖時，我們可以根據不同的縮放比例來改變背景圖的位置，讓它始終保持在容器中心。
例如，我們定義了一個寬度為300px、高度為200px的容器，并使用了一個寬度為500px、高度為400px的背景圖像。我們可以使用如下的CSS代碼：

div {
width: 300px;
height: 200px;
background-image: url(bg.png);
background-size: contain;
background-position: center;
}

這樣，當容器尺寸發生變化時，背景圖會隨之動態改變大小，并始終位于容器中心。
綜上所述，通過使用background-size和background-position屬性，我們可以很容易地實現CSS背景圖隨容器動態改變大小的效果。