HTML DOM backgroundPosition 属性

定义和用法

backgroundPosition 属性设置背景图像的位置。

语法:

  1. Object.style.backgroundPosition=position
参数 描述
- top left - top center - top right - center left - center center - center right - bottom left - bottom center - bottom right 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。
x% y% 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。
xpos ypos 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。

实例

本例改变背景图像的位置:

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body
  5. {
  6. background-color:#FFCC80;
  7. background-image:url(bgdesert.jpg);
  8. background-repeat:no-repeat
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. function changePosition()
  13. {
  14. document.body.style.backgroundPosition="bottom center";
  15. }
  16. </script>
  17. </head>
  18. <body>
  19.  
  20. <input type="button" onclick="changePosition()"
  21. value="Change background-image position" />
  22.  
  23. </body>
  24. </html>