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

CSS樣式表可以用來設(shè)置網(wǎng)頁的背景圖片，讓網(wǎng)頁更加美觀和吸引人，下面是一些關(guān)于如何在CSS樣式表中設(shè)置背景圖片的方法。

1、使用background-image屬性

在CSS樣式表中，可以使用background-image屬性來設(shè)置網(wǎng)頁的背景圖片，該屬性的值可以是圖片的URL地址，也可以是將圖片轉(zhuǎn)換為base64編碼后的字符串。

以下代碼可以將圖片設(shè)置為網(wǎng)頁的背景：

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

或者，如果圖片較小，也可以將其轉(zhuǎn)換為base64編碼后的字符串來設(shè)置背景：

body {
  background-image: base64(image.png);
}

2、使用background-repeat屬性

默認情況下，背景圖片會重復(fù)顯示在網(wǎng)頁上，如果想要改變這個默認行為，可以使用background-repeat屬性來控制圖片的重復(fù)方式，該屬性的值可以是repeat（默認值）、repeat-x（水平重復(fù)）、repeat-y（垂直重復(fù)）或者no-repeat（不重復(fù)）。

以下代碼可以讓背景圖片只在垂直方向上重復(fù)：

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

3、使用background-position屬性

可以使用background-position屬性來控制背景圖片在網(wǎng)頁上的位置，該屬性的值可以是top（頂部對齊）、middle（中部對齊）、bottom（底部對齊）或者具體的像素值。

以下代碼可以將背景圖片放置在網(wǎng)頁的底部：

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

或者，如果要將圖片放置在距離頂部20像素的位置，可以使用以下代碼：

body {
  background-image: url("image.jpg");
  background-position: top 20px;
}