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

打印页面