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

1. 設(shè)置背景圖
2. 調(diào)整背景圖位置
3. 背景圖尺寸調(diào)整
4. 背景圖固定與滾動(dòng)

CSS3背景圖的使用

CSS3提供了強(qiáng)大的背景圖功能，可以方便地為網(wǎng)頁添加背景圖片，下面是一些關(guān)于如何使用CSS3背景圖的技巧。

設(shè)置背景圖

在CSS3中，可以使用background-image屬性來設(shè)置背景圖。

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

這會(huì)將名為image.jpg的圖片設(shè)置為網(wǎng)頁的背景圖，注意，圖片路徑需要正確，否則背景圖無法正確顯示。

調(diào)整背景圖位置

默認(rèn)情況下，背景圖會(huì)填充整個(gè)元素區(qū)域，并可能會(huì)重復(fù)顯示，可以通過background-repeat屬性來控制背景圖的重復(fù)方式，如repeat-x、repeat-y或no-repeat。

body {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
}

這會(huì)使背景圖只顯示一次，不會(huì)重復(fù)。

背景圖尺寸調(diào)整

可以通過background-size屬性來調(diào)整背景圖的大小。

body {
  background-image: url("image.jpg");
  background-size: cover;
}

這會(huì)使背景圖覆蓋整個(gè)元素區(qū)域，無論圖片原始尺寸如何。

背景圖固定與滾動(dòng)

默認(rèn)情況下，背景圖會(huì)隨頁面一起滾動(dòng)，可以通過background-attachment屬性來固定背景圖，使其不隨頁面滾動(dòng)。

body {
  background-image: url("image.jpg");
  background-attachment: fixed;
}

這會(huì)使背景圖固定在頁面上方，不會(huì)隨頁面一起滾動(dòng)。

通過以上技巧，可以方便地在CSS3中使用背景圖，為網(wǎng)頁添加美觀的背景效果。