CSS中背景圖片放大的方法

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

如果我們想把背景圖片放大到200%，我們可以這樣寫(xiě)：

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

這段代碼會(huì)將div元素的背景圖片放大到原來(lái)的200%，注意，如果圖片本身的大小大于元素的大小，那么圖片可能會(huì)被裁剪。

我們還可以使用contain或cover關(guān)鍵字來(lái)保持圖片的完整性。contain會(huì)保證圖片始終在元素內(nèi)部，而cover則會(huì)將圖片放大到完全覆蓋元素，但可能會(huì)超出元素的邊界。

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

這段代碼會(huì)將背景圖片放大到200%，并且保證圖片始終在元素內(nèi)部，不會(huì)超出元素的邊界。no-repeat關(guān)鍵字保證了圖片不會(huì)重復(fù)，center關(guān)鍵字將圖片定位在元素的中心。