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

1. 基本語(yǔ)法
2. 多個(gè)背景圖片
3. 背景圖片的尺寸和位置
4. 響應(yīng)式背景圖片

CSS背景圖片的設(shè)置方法

在CSS中，我們可以使用background-image屬性來(lái)設(shè)置網(wǎng)頁(yè)的背景圖片，這個(gè)屬性接受一個(gè)URL值，指向你想要作為背景的圖片，下面是一些示例代碼，幫助你更好地理解和實(shí)現(xiàn)CSS背景圖片的設(shè)置。

基本語(yǔ)法

body {
  background-image: url('你的圖片URL');
}

在上面的代碼中，body選擇器用于選擇整個(gè)網(wǎng)頁(yè)的background-image屬性，你可以將url('你的圖片URL')替換成你想要作為背景的圖片的URL。

多個(gè)背景圖片

如果你想在網(wǎng)頁(yè)上設(shè)置多個(gè)背景圖片，可以使用CSS的background-image屬性，并為它提供多個(gè)URL值，這些圖片將會(huì)按照從左到右的順序排列。

body {
  background-image: url('圖片1的URL'), url('圖片2的URL'), url('圖片3的URL');
}

背景圖片的尺寸和位置

除了設(shè)置背景圖片外，你還可以使用CSS來(lái)調(diào)整圖片的尺寸和位置，使用background-size屬性來(lái)設(shè)置圖片的尺寸，使用background-position屬性來(lái)調(diào)整圖片的位置。

body {
  background-image: url('你的圖片URL');
  background-size: cover; /* 圖片將會(huì)覆蓋整個(gè)元素 */
  background-position: center; /* 圖片將會(huì)位于元素的中心 */
}

響應(yīng)式背景圖片

為了讓你的網(wǎng)頁(yè)在不同的設(shè)備上都能顯示得很好，你可以使用媒體查詢來(lái)設(shè)置響應(yīng)式的背景圖片，這樣，當(dāng)設(shè)備屏幕尺寸改變時(shí)，背景圖片的尺寸和位置也會(huì)相應(yīng)地調(diào)整。

@media (max-width: 600px) {
  body {
    background-image: url('小尺寸圖片URL');
  }
}
@media (min-width: 601px) {
  body {
    background-image: url('大尺寸圖片URL');
  }
}

在上面的代碼中，當(dāng)屏幕寬度小于等于600px時(shí)，背景圖片將會(huì)是小尺寸的圖片；當(dāng)屏幕寬度大于600px時(shí)，背景圖片將會(huì)是大尺寸的圖片。