HTML - DOM样式对象 backgroundAttachment 属性

HTML DOM 样式对象 **backgroundAttachment** 属性用于设置或返回背景图像是否应随内容滚动或保持固定。

语法

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

设置 backgroundAttachment 属性

object.style.backgroundAttachment= "scroll | fixed | local | initial | inherit";

获取 backgroundAttachment 属性

object.style.backgroundAttachment;

属性值

值	描述
scroll	这是默认值，允许背景图像与文档一起滚动。
fixed	此值使背景图像相对于视口固定。
local	这允许背景图像随元素的内容一起滚动。
initial	用于将此属性设置为其默认值。
inherit	用于继承其父元素的属性。

返回值

它返回一个字符串值，表示背景图像如何附加到文档中的对象。

HTML DOM 样式对象“backgroundAttachment”属性示例

以下示例说明了 backgroundAttachment 的不同属性值

将背景设置为“scroll”

以下示例将背景附件设置为 **scroll**，允许图像随元素一起滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundAttachment Property
    </title>
    <style>
        body {
            background: #f3f3f3 url('html/images/logo.png') no-repeat right top;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to change the attachment to fixed.</p>
    <button onclick="scroll()">Scroll</button>
    <script>
        function scroll() {
            document.body.style.backgroundAttachment = "scroll";
        }
    </script>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
</body>
</html>

将背景设置为“fixed”

以下示例将背景附件设置为 **fixed**，允许图像在元素滚动时保持固定。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundAttachment Property
    </title>
    <style>
        body {
            background: #f3f3f3 url('html/images/logo.png') no-repeat right top;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to change the attachment to fixed.</p>
    <button onclick="fix()">Fixed</button>
    <script>
        function fix() {
            document.body.style.backgroundAttachment = "fixed";
        }
    </script>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
</body>
</html>

将背景设置为“local”

以下示例将背景附件设置为 **local**，允许图像随元素的内容一起滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundAttachment Property
    </title>
    <style>
        body {
            background: #f3f3f3 url('html/images/logo.png') no-repeat right top;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to change the attachment to local.</p>
    <button onclick="local()">local</button>
    <script>
        function local() {
            document.body.style.backgroundAttachment = "local";
        }
    </script>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
</body>
</html>

支持的浏览器

属性
backgroundAttachment	是 1	是 12	是 1	是 1	是 3.5

html_dom_style_object_reference.htm

打印页面