Style backgroundPosition 屬性

定義和用法

backgroundPosition 屬性設置或返回背景圖像在元素中的位置。

另請參閱：

HTML 樣式：background 屬性

CSS 教程：CSS 背景

CSS3 教程：CSS3 背景

CSS 參考手冊：background-image 屬性

CSS 參考手冊：background-position 屬性

實例

例子 1

更改背景圖像的位置：

document.body.style.backgroundPosition = "top right";

親自試一試

例子 2

將 <div> 元素中背景圖像的位置更改為底部居中：

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

親自試一試

例子 3

將 <div> 元素中背景圖像的位置更改為水平 200 像素和垂直 40 像素：

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

親自試一試

例子 4

返回 <div> 元素中背景圖像的位置：

document.getElementById("myDiv").style.backgroundPosition;

親自試一試

語法

返回 backgroundPosition 屬性：

object.style.backgroundPosition

設置 backgroundPosition 屬性：

object.style.backgroundPosition = value

屬性值

值 描述
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
 如果您只規定一個關鍵字，則另一個值將是 "center"。
x% y%

x 值表示水平位置，y 值表示垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您只規定一個值，則另一個值為 50%。
xpos ypos

x 值表示水平位置，y 值表示垂直位置。

左上角為 0 0。單位可以是像素 (0px 0px) 或任何其他 CSS 單位。

如果您只規定一個值，則另一個值為 50%。您可以混合使用 % 和單位。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： 0% 0%
返回值： 字符串，表示背景圖像的位置。
CSS 版本： CSS1

瀏覽器支持

backgroundPosition 是 CSS1 (1996) 特性。

所有瀏覽器都完全支持它：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
支持 支持 支持 支持 支持 支持