CSS3 背景位置 在設計網頁時，背景圖片是非常重要的一個元素，可以為網頁增添新穎和美麗的視覺效果。在 CSS3 中，我們可以使用屬性 background-position 來設置背景圖片的位置。 使用方法 background-position 屬性既可以使用關鍵字，也可以使用像素值、百分比值或者位置名稱。 關鍵字 通過使用預定義的關鍵字，我們可以設置背景圖片在網頁中的位置。以下是一些主要的關鍵字： - left：背景圖片左對齊。 - right：背景圖片右對齊。 - center：背景圖片居中。 - top：背景圖片頂部對齊。 - bottom：背景圖片底部對齊。 像素值和百分比值 我們也可以使用像素值或者百分比值來設置背景圖片的位置。 如果使用像素值，可以按照以下格式設置： background-position: x-axis y-axis; 其中 x-axis 表示水平方向的偏移量，y-axis 表示豎直方向的偏移量。例如，background-position: 50px 100px; 就是將背景圖片向右偏移 50 像素，向下偏移 100 像素。 如果使用百分比值，可以按照以下格式設置： background-position: x-axis% y-axis%; 其中 x-axis% 表示水平方向的偏移百分比，y-axis% 表示豎直方向的偏移百分比。例如，background-position: 50% 100%; 就是將背景圖片向右偏移 50%，向下偏移 100%。 位置名稱 除了關鍵字、像素值和百分比值之外，還可以使用一些位置名稱，例如 left top、left center、right bottom 等等，來設置背景圖片的位置。 代碼示例 以下是一些例子，展示了如何使用不同的方法設置背景圖片的位置。 使用關鍵字：

p {
background-image: url("my-image.jpg");
background-position: center;
}

使用像素值：

p {
background-image: url("my-image.jpg");
background-position: 50px 100px;
}

使用百分比值：

p {
background-image: url("my-image.jpg");
background-position: 50% 100%;
}

使用位置名稱：

p {
background-image: url("my-image.jpg");
background-position: left top;
}

總結 通過使用 background-position 屬性，我們可以輕松設置背景圖片在網頁中的位置。在實際應用中，我們可以根據需要選擇不同的方法來進行設置。