CSS背景圖片放大縮小的方法

在CSS中，我們可以使用background-size屬性來(lái)放大或縮小背景圖片，這個(gè)屬性接受兩個(gè)值：寬度和高度，如果我們只提供一個(gè)值，那么另一個(gè)值會(huì)自動(dòng)計(jì)算以保持圖片的寬高比。

如果我們想把背景圖片放大到原來(lái)的兩倍，我們可以這樣寫：

div {
  background-image: url('image.jpg');
  background-size: 200% 200%;
}

這會(huì)把背景圖片放大到原來(lái)的兩倍大小，如果我們只想放大寬度，那么可以只提供寬度值：

div {
  background-image: url('image.jpg');
  background-size: 200% auto;
}

這會(huì)把背景圖片的寬度放大到原來(lái)的兩倍，而高度會(huì)自動(dòng)計(jì)算以保持圖片的寬高比。

同樣，我們也可以縮小圖片，如果我們想把圖片縮小到原來(lái)的50%，可以寫：

div {
  background-image: url('image.jpg');
  background-size: 50% 50%;
}

或者只縮小寬度：

div {
  background-image: url('image.jpg');
  background-size: 50% auto;
}

這樣，背景圖片就會(huì)被縮小到原來(lái)的50%，注意，auto關(guān)鍵字在這里表示高度會(huì)自動(dòng)計(jì)算以保持圖片的寬高比。