html怎麼設定圖片背景？背景屬性介紹

在網頁設計中，有時候我們需要使用圖片作為背景來美化網頁。 HTML提供了多種方法來設定圖片背景，本文將介紹使用CSS的background屬性來設定圖片背景的方法。

一、使用background-image屬性設定圖片背景

background-image屬性是用來設定元素的背景圖片，它可以指定一個或多個圖片文件，並且可以與其他background屬性一起使用。

語法如下：

background-image: url(path);

其中，url()指定圖片的路徑，可以是相對路徑或絕對路徑。例如以下程式碼設定一個圖片背景：

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

在這個範例中，會將bg.jpg這張圖片作為整個頁面的背景。要注意的是，在HTML中，我們將這段CSS程式碼放在style標籤中或外部的CSS檔案中。

二、使用background-repeat屬性和background-position屬性

我們通常還需要設定圖片的重複方式和位置，這時候就需要使用background-repeat屬性和background-position屬性。

1. background-repeat屬性

background-repeat屬性用來設定背景圖片的重複方式，可以取以下值：

• repeat ：預設值，背景圖片將在水平和垂直方向上重複顯示。
• repeat-x：只在水平方向重複顯示。
• repeat-y：只在垂直方向重複顯示。
• no-repeat：不進行重複顯示。

例如，在下列程式碼中，將背景圖片設定為只在水平方向重複顯示：

body { background-image: url(bg.jpg); background-repeat: repeat-x; }

2. background-position屬性

top：背景圖片從頂部開始顯示。
• bottom：背景圖片從底部開始顯示。
• center：背景圖片在中間顯示。
• left：背景圖片從左側開始顯示。
• right：背景圖片從右側開始顯示。

body { background-position: x-axis y-axis; }

body { background-image: url(bg.jpg); background-repeat: no-repeat; background-position: center top; }

auto：預設值，背景圖片顯示為原始大小。
• cover：將背景圖片縮放以完全覆蓋元素區域（可能會裁切背景圖片）。
• contain：盡可能縮小背景圖片以完全適合元素區域（可能會有空間留白）。
• 指定大小：可以使用像素、百分比等單位來指定背景圖片的大小。

body { background-image: url(bg.jpg); background-repeat: no-repeat; background-position: center top; background-size: contain; }

以上是html怎麼設定圖片背景？背景屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！