Style backgroundPosition 属性
Style 对象的 backgroundPosition 属性设置或返回元素的背景图像的位置
语法
设置 backgroundPosition 属性
object.style.backgroundPosition=" position "
返回 backgroundPosition 属性
object.style.backgroundPosition
默认值
backgroundPosition 属性的默认值是：0% 0%
值说明
| 值 | 描述 |
|---|---|
| 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% 可以混合使用 % 和单位 |
| inherit | 背景位置属性的设置从父元素继承 |
浏览器支持
所有主要浏览器都支持 backgroundPosition 属性
IE7 及更早的版本不支持 "inherit" 值
IE8 只有规定了 <!DOCTYPE> 才支持 "inherit"
IE9 支持 "inherit"
范例
更改背景图像的位置
<style> div{ background-image: url('/static/i/javascript/basic/img_tree.png'); background-repeat: no-repeat; width: 400px; height: 400px; border: 1px solid #000000; } </style> <script> function displayResult(){ document.getElementById("div1").style.backgroundPosition="center bottom"; } </script> <button type="button" onclick="displayResult()">修改背景图像位置</button> <br> <div id="div1"> </div>