本文目錄導(dǎo)讀：

1. 使用CSS填充背景圖片
2. 使用CSS填充多個背景圖片
3. 使用CSS填充背景圖片并設(shè)置樣式
4. 使用CSS填充背景圖片并設(shè)置大小

CSS背景圖片填充方法

CSS中，背景圖片填充是一個常見的需求，它可以讓網(wǎng)頁更加美觀，下面是一些關(guān)于如何使用CSS填充背景圖片的方法。

使用CSS填充背景圖片

在CSS中，可以使用background-image屬性來填充背景圖片。

body {
  background-image: url('image.jpg');
}

這會將image.jpg作為背景圖片填充到網(wǎng)頁中，需要注意的是，如果圖片路徑錯誤或者圖片不存在，背景將不會顯示。

使用CSS填充多個背景圖片

如果想要填充多個背景圖片，可以使用background-image屬性并設(shè)置多個值。

body {
  background-image: url('image1.jpg'), url('image2.jpg');
}

這會將image1.jpg和image2.jpg作為背景圖片填充到網(wǎng)頁中，多個背景圖片會按照從左到右的順序排列。

使用CSS填充背景圖片并設(shè)置樣式

除了填充背景圖片外，還可以使用CSS的其他屬性來設(shè)置背景圖片的樣式。

body {
  background-image: url('image.jpg');
  background-repeat: no-repeat;  // 不重復(fù)填充背景圖片
  background-position: center; // 將背景圖片居中顯示
}

這會將image.jpg作為背景圖片填充到網(wǎng)頁中，并且不重復(fù)填充，將背景圖片居中顯示。

使用CSS填充背景圖片并設(shè)置大小

如果想要設(shè)置背景圖片的大小，可以使用background-size屬性。

body {
  background-image: url('image.jpg');
  background-size: cover;  // 將背景圖片放大或縮小以覆蓋整個元素區(qū)域
}

這會將image.jpg作為背景圖片填充到網(wǎng)頁中，并將其放大或縮小以覆蓋整個元素區(qū)域，需要注意的是，如果圖片本身的大小與元素區(qū)域不匹配，可能會出現(xiàn)拉伸或壓縮的效果，在使用cover值時需要注意圖片的分辨率和尺寸。