关于Object.style.backgroundPosition

最新推荐文章于 2022-01-19 17:20:07 发布

原创最新推荐文章于 2022-01-19 17:20:07 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#button #div #css #url

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了CSS背景位置属性的定义、用法和语法，通过具体实例展示了如何设置背景图像的位置，并提供了关键值及其含义的详细说明。

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%.

Value	Description
top left top center top right center left center center center right bottom left bottom center bottom right	If 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 ypos	The 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 units
inherit	The 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>