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

列印頁面