语法
background-attachment: scroll | fixed | local | initial | inherit;
background-attachment属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("/build/images/onitroad-logo-black.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 400px 100px;
}
</style>
</head>
<body>
<h2>Background-attachment example</h2>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>背景图像随页面滚动。 试一下向下滚动。</p>
<p>如何看不到滚动，尝试调整一下窗口大小</p>
</body>
</html>
在下面的示例中，背景图像是“固定的”并且不随页面移动。
具有“fixed”固定值的background-attachment属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("/build/images/onitroad-logo-black.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 400px 100px;
}
</style>
</head>
<body>
<h2>Background-attachment example</h2>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>背景图设置为fixed. 试一下向下滚动页面。</p>
<p>如何看不到滚动，尝试调整一下窗口大小</p>
</body>
</html>
具有固定背景图像的背景附着属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-image: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<h2>Background-attachment 示例</h2>
<p> 滚动页面查看效果</p>
<div class="example"></div>
<div style="height:800px;background-color:#1c87c9;"></div>
</body>
</html>
background-attachment 属性定义了背景图像是固定的还是与页面的其余部分一起滚动。
Background-attachment 有三个值：fixed、scroll 和 local。
设置“scroll”滚动值后，背景图像将随页面滚动。
这是默认值。
当应用“fixed”固定值时，背景图像将保持固定到视口。
即使元素具有滚动机制，背景也不会随页面移动。
设置本地值后，背景图像将随元素内容一起滚动。
| 初始值 | scroll |
|---|---|
| 应用于 | 所有元素。它也适用于：::first-letter 和 ::first-line |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS1 |
| DOM 语法 | object.style.backgroundAttachment=“scroll”； |
CSS background-attachment属性值说明
| 值 | 说明 |
|---|---|
| scroll | 使背景图像与元素一起滚动。这是默认值 |
| fixed | 使背景相对于视口固定。 |
| local | 使背景与元素的内容一起滚动。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:15 来源：oir作者：oir