关于Object.style.backgroundPosition

来源：互联网发布：画分镜头的软件编辑：程序博客网时间：2024/06/11 14:15

SOURCE：http://www.w3schools.com/jsref/prop_style_backgroundposition.asp

Definition and Usage

The backgroundPosition property sets or returns the position of a background-image within an element.

Syntax

Set the backgroundPosition property:

Object.style.backgroundPosition="position"

Return the backgroundPosition property:

Object.style.backgroundPosition

Tip: The default value for the backgroundPosition property is: 0% 0%.

ValueDescriptiontop left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom rightIf you only specify one keyword, the other value will be "center".x% y%The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.xpos yposThe x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and unitsinheritThe setting of the background-position property is inherited from the parent element

Example

Change the position of the background-image:

<html>
<head>
<style>
div
{
background-image: url('img_tree.png');
background-repeat: no-repeat;
width: 400px;
height: 400px;
border: 1px solid #000000;
}
</style>
<script type="text/javascript">
function displayResult()
{
document.getElementById("div1").style.backgroundPosition="center bottom";
}
</script>
</head>
<body>

<button type="button" onclick="displayResult()">Position background image</button>
<br />
<div id="div1">
</div>

</body>
</html>