上查看所有课程
CSS 的 background-attachment 属性控制背景图像是随页面滚动还是固定在页面内容上。例如，
body {
background-image: url("coder-illustration.png");
background-attachment: fixed;
}浏览器输出
滚动时背景固定。
滚动时背景固定。
滚动时背景固定。
滚动时背景固定。
滚动时背景固定。
滚动时背景固定。
滚动时背景固定。
滚动时背景固定。
滚动时背景固定。
滚动时背景固定。
在这里，background-attachment 在滚动 body 中的其余内容时，使背景图像保持固定。
CSS background-attachment 语法
background-attachment 属性的语法是，
background-attachment: scroll | fixed | local | initial | inherit;这里，
scroll：允许背景图像随页面滚动（默认值）fixed：阻止背景图像随页面滚动local：允许背景图像随元素的內容滚动initial：将属性值设置为默认值inherit：继承其父元素的属性值。
示例 1：背景附件与滚动
让我们看一个使用 background-attachment 属性的 scroll 值的示例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-attachment</title>
</head>
<body>
<h1>Using background-attachment: scroll</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>body {
background-image: url('https://programiz.com.cn/blog/content/images/2021/09/C---Illustration-1.jpg');
background-attachment: scroll;
background-repeat: no-repeat;
}浏览器输出
在上面的示例中，背景图像与 body 元素中的其余内容一起滚动。
示例 2：背景附件与固定
让我们看一个使用 background-attachment 属性的 fixed 值的示例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-attachment</title>
</head>
<body>
<h1>Using background-attachment: fixed</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>body {
background-image: url('https://programiz.com.cn/blog/content/images/2021/09/C---Illustration-1.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
}浏览器输出
使用 background-attachment: fixed
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
在上面的示例中，背景图像保持固定。它不会与 body 元素的其余内容一起滚动。