CSS控制背景大小的方法

在CSS中，我們可以使用background-size屬性來(lái)控制背景圖片的大小，這個(gè)屬性接受兩個(gè)值，分別是水平和垂直方向的尺寸，我們可以使用像素、百分比或者自動(dòng)單位來(lái)指定尺寸。

如果我們想要將背景圖片在水平方向拉伸到200像素，在垂直方向保持原圖大小，我們可以這樣寫(xiě)：

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

如果我們想要將背景圖片在垂直方向拉伸到300像素，在水平方向保持原圖大小，我們可以這樣寫(xiě)：

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

如果我們想要將背景圖片在水平和垂直方向都保持原圖大小，我們可以這樣寫(xiě)：

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

需要注意的是，如果背景圖片的大小大于元素的大小，那么背景圖片會(huì)被裁剪到元素的大小，如果背景圖片的大小小于元素的大小，那么背景圖片會(huì)被拉伸到元素的大小。