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

1. 背景圖像拉伸
2. 背景圖像重復(fù)
3. 背景圖像位置

CSS背景拉伸設(shè)置

在CSS中，我們可以使用背景圖像，并將其拉伸以填充整個(gè)元素，這可以通過設(shè)置背景圖像的background-size屬性來實(shí)現(xiàn)。

背景圖像拉伸

在CSS中，我們可以使用background-size屬性來設(shè)置背景圖像的尺寸，該屬性接受兩個(gè)值，***個(gè)值表示圖像的寬度，第二個(gè)值表示圖像的高度，如果第二個(gè)值省略，則瀏覽器會(huì)自動(dòng)計(jì)算高度，使圖像保持原始寬高比。

如果我們有一張寬度為300像素的背景圖像，我們可以將其拉伸到寬度為600像素，高度自動(dòng)計(jì)算：

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

背景圖像重復(fù)

除了設(shè)置背景圖像的尺寸外，我們還可以使用background-repeat屬性來設(shè)置背景圖像的重復(fù)方式，該屬性接受四個(gè)值：repeat-x、repeat-y、repeat和no-repeat。

如果我們希望背景圖像在水平方向上重復(fù)，可以設(shè)置為：

div {
  background-image: url('background.png');
  background-repeat: repeat-x;
}

背景圖像位置

我們還可以使用background-position屬性來設(shè)置背景圖像的位置，該屬性接受兩個(gè)值，***個(gè)值表示圖像的橫向位置，第二個(gè)值表示圖像的縱向位置。

如果我們希望背景圖像位于元素的左上角，可以設(shè)置為：

div {
  background-image: url('background.png');
  background-position: left top;
}

通過以上三個(gè)屬性的設(shè)置，我們可以輕松地實(shí)現(xiàn)CSS背景圖像的拉伸和重復(fù)效果。