Style backgroundPosition 屬性
更多“自己嘗試”的例子見下文。
描述
backgroundPosition 屬性設定或返回元素內背景影像的位置。
另請參閱
HTML 樣式： background 屬性
CSS 教程： CSS 背景
CSS3 教程： CSS3 背景
CSS 參考： background-image 屬性
CSS 參考： background-position 屬性
語法
返回 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 |
| 是 | 是 | 是 | 是 | 是 | 是 |
更多示例
示例
將 <div> 元素中背景影像的位置更改為 center bottom
document.getElementById("myDiv").style.backgroundPosition = "center bottom";自己動手試一試 »
示例
將 <div> 元素中背景影像的位置更改為水平 200px 和垂直 40px
document.getElementById("myDiv").style.backgroundPosition = "200px 40px";
自己動手試一試 »
