HTML - DOM Style 对象 backgroundPosition 属性

HTML DOM Style 对象 **backgroundPosition** 属性设置或返回元素的背景图像位置。

语法

以下是获取或设置 backgroundPosition 属性的语法。

设置 backgroundPosition 属性

object.style.backgroundPosition = value;

获取 backgroundPosition 属性

object.style.backgroundPosition;

属性值

值	描述
顶部左侧顶部居中顶部右侧中间左侧中间居中中间右侧底部左侧底部居中底部右侧	它使用关键词指定背景图像的位置。如果只指定一个值，则默认另一个值为“居中”。
x% y%	它使用百分比指定背景图像的位置，其中 x 表示水平位置，y 表示垂直位置。0% 0% 表示左上角，而 100% 100% 表示右下角。当只指定一个值时，默认另一个值为 50%（居中）。
xpos ypos	它使用像素或任何其他 CSS 测量单位指定背景图像的位置，其中 x 表示水平位置，y 表示垂直位置。0 0 表示左上角，而 100 100 表示右下角。当只指定一个值时，默认另一个值为居中。
初始值	用于将此属性设置为其默认值。
继承	用于继承其父元素的属性。

返回值

它返回一个字符串值，表示背景图像的位置。

HTML DOM Style 对象“backgroundPosition”属性示例

以下示例说明了使用不同方法定位背景。

使用关键词定位

在以下示例中，我们使用了关键词来定位背景图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundPosition Property
    </title>
    <style>
        body {
            background: #f3f3f3 url('/html/images/logo.png') no-repeat;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to change positioning.</p>
    <button onclick="topcen()">Top Center</button>
    <button onclick="bottomleft()">Bottom Left</button>
    <button onclick="centerright()">Center Right</button>
    <script>
        function topcen(){
            document.body.style.backgroundPosition="top";
        }
        function bottomleft(){
            document.body.style.backgroundPosition="bottom left";
        }
        function centerright(){
            document.body.style.backgroundPosition="center right";
        }
    </script>
</body>
</html>

使用百分比定位

在以下示例中，我们使用了百分比来定位背景图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Style Object backgroundPosition Property</title>
    <style>
        body {
            background: #f3f3f3 url('/html/images/logo.png') no-repeat;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to change positioning.</p>
    <button onclick="fun()">Change</button>
    <script>
        function fun(){
            document.body.style.backgroundPosition="74% 80%";
        }
    </script>
</body>
</html>

使用像素定位

在以下示例中，我们使用了像素来定位背景图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Style Object backgroundPosition Property</title>
    <style>
        body {
            background: #f3f3f3 url('/html/images/logo.png') no-repeat;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to change positioning.</p>
    <button onclick="fun()">Change</button>
    <script>
        function fun(){
            document.body.style.backgroundPosition="60px 60px";
        }
    </script>
</body>
</html>

支持的浏览器

属性
backgroundPosition	是 1	是 12	是 1	是 1	是 3.5

html_dom_style_object_reference.htm

打印页面