HTML DOM backgroundPosition 属性
JavaScript基础 2022-06-08 14:24:21小码哥的IT人生shichen
HTML DOM backgroundPosition 属性
定义和用法
backgroundPosition 属性设置背景图像的位置。
语法：
Object.style.backgroundPosition=position
| 参数 | 描述 |
|---|---|
|
如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。 |
| x% y% |
第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。 |
| xpos ypos |
第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。 |
实例
本例改变背景图像的位置：
<html>
<head>
<style type="text/css">
body
{
background-color:#FFCC80;
background-image:url(bgdesert.jpg);
background-repeat:no-repeat
}
</style>
<script type="text/javascript">
function changePosition()
{
document.body.style.backgroundPosition="bottom center";
}
</script>
</head>
<body>
<input type="button" onclick="changePosition()"
value="Change background-image position" />
</body>
</html>TIY
完整实例【改变背景图像的位置】：
<html>
<head>
<style type="text/css">
body
{
background-color:#FFCC80;
background-image:url(/i/eg_bg_desert.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
<script type="text/javascript">
function changePosition()
{
document.body.style.backgroundPosition="bottom center";
}
</script>
</head>
<body>
<input type="button" onclick="changePosition()" value="Change background-image position" />
<p><b>Note:</b> For this to work in Mozilla, the background-attachment property must be set to "fixed".</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
