CSS - background-attachment 屬性

CSS 的 background-attachment 屬性決定了背景影像在視口中的位置是固定的，還是隨著其容器一起滾動。

語法

background-attachment: scroll | fixed | local | initial | inherit;

屬性值

值	描述
fixed	指定背景影像不會隨著頁面滾動。
local	指定背景影像會隨著元素的內容一起滾動。
scroll	指定背景影像會隨著頁面一起滾動。預設值。
initial	將屬性設定為其初始值。
inherit	從父元素繼承該屬性。

CSS 背景附件示例

下面描述了 background-attachment 屬性的一些不同值的示例。

不隨頁面滾動

為了防止背景影像滾動，我們使用 fixed 值。以下示例演示了 background-attachment: fixed 屬性，它將背景影像相對於視口固定。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .fixed {
            background-image: url('images/logo.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: left top;
            background-color: lightblue;
            background-size: 40% 30%;
            padding: 5rem;
            width: 800px;
            height: 500px;
        }
    </style>
</head>

<body>
    <h2>CSS background-attachment Property</h2>
    <div class="fixed">
        <p>
            Lorem Ipsum is simply dummy text of the printing 
            and typesetting industry. Lorem Ipsum has been the 
            industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and 
            scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also 
            the leap into electronic typesetting, remaining 
            essentially unchanged. It was popularised in the 
            1960s with the release of Letraset sheets containing 
            Lorem Ipsum passages, and more recently with desktop 
            publishing software like Aldus PageMaker including 
            versions of Lorem Ipsum.
        </p>
    </div>
</body>

</html>

隨元素內容滾動

為了使背景影像隨元素的內容一起滾動，我們使用 local 值。以下示例演示了 background-attachment: scroll 屬性，它使背景影像隨內容一起滾動。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .scroll {
            background-image: url('images/logo.png');
            background-repeat: no-repeat;
            background-attachment: local;
            background-position: left top;
            background-color: lightblue;
            background-size: 40% 30%;
            padding: 5rem;
            width: 800px;
            height: 500px;
        }
    </style>
</head>

<body>
    <h2>CSS background-attachment Property</h2>
    <div class="scroll">
        <p>
            Lorem Ipsum is simply dummy text of the printing 
            and typesetting industry. Lorem Ipsum has been the 
            industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and 
            scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also 
            the leap into electronic typesetting, remaining 
            essentially unchanged. It was popularised in the 
            1960s with the release of Letraset sheets containing 
            Lorem Ipsum passages, and more recently with desktop 
            publishing software like Aldus PageMaker including 
            versions of Lorem Ipsum.
        </p>
    </div>
</body>

</html>

隨頁面滾動

為了使背景影像隨頁面一起滾動，我們使用 scroll 值。以下示例演示了 background-attachment: scroll 屬性，它將背景影像相對於元素的內容固定。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .local {
            background-image: url('images/logo.png');
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: left top;
            background-color: lightblue;
            background-size: 40% 30%;
            padding: 5rem;
            width: 800px;
            height: 500px;
        }
    </style>
</head>

<body>
    <h2>CSS background-attachment Property</h2>
    <div class="local">
        <p>
            Lorem Ipsum is simply dummy text of the printing 
            and typesetting industry. Lorem Ipsum has been the 
            industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and 
            scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also 
            the leap into electronic typesetting, remaining 
            essentially unchanged. It was popularised in the 
            1960s with the release of Letraset sheets containing 
            Lorem Ipsum passages, and more recently with desktop 
            publishing software like Aldus PageMaker including 
            versions of Lorem Ipsum.
        </p>
    </div>
</body>

</html>

支援的瀏覽器

屬性
background-image	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面