CSS中如何將圖片設(shè)為背景

在CSS中，我們可以使用background-image屬性將圖片設(shè)為背景，這個(gè)屬性接受一個(gè)URL值，即你要設(shè)置為背景的圖片的URL。

以下是一個(gè)簡(jiǎn)單的例子：

body {
  background-image: url('http://canthisbe.com/image.jpg');
}

在這個(gè)例子中，圖片image.jpg被設(shè)置為body元素的背景，你可以將body替換為任何你想要的元素選擇器，以將背景圖片應(yīng)用到不同的元素上。

如果你想讓背景圖片在頁(yè)面中重復(fù)，可以使用background-repeat屬性，如果你想要讓背景圖片在水平和垂直方向上重復(fù)，可以這樣做：

body {
  background-image: url('http://canthisbe.com/image.jpg');
  background-repeat: repeat;
}

你還可以使用background-position屬性來(lái)調(diào)整背景圖片的位置，如果你想要讓背景圖片從頁(yè)面的右上角開始顯示，可以這樣做：

body {
  background-image: url('http://canthisbe.com/image.jpg');
  background-position: right top;
}

需要注意的是，如果頁(yè)面內(nèi)容比背景圖片更大，那么背景圖片可能會(huì)被拉伸或者壓縮，如果你想要避免這種情況，可以使用background-size屬性來(lái)限制背景圖片的大小，你可以讓背景圖片始終保持其原始大?。?/p>

body {
  background-image: url('http://canthisbe.com/image.jpg');
  background-size: contain;
}

這樣，背景圖片就不會(huì)被拉伸或壓縮了。