要让背景图片固定不随滚动条滚动，可以使用 CSS 的 background-attachment: fixed; 属性。
以下是如何在你的 CSS 代码中实现它的方法：
body {
background-image: url("your-image.jpg"); /* 你的图片路径 */
background-repeat: no-repeat; /* 可选：控制图片是否重复 */
background-size: cover; /* 可选：控制图片大小，cover会覆盖整个区域 */
background-position: center; /* 可选：控制图片位置 */
background-attachment: fixed; /* 关键：固定背景图片 */
}
解释:
background-image: url("your-image.jpg");: 设置背景图片的路径。 替换"your-image.jpg"为你的图片的实际路径。background-repeat: no-repeat;: 这个属性是可选的。它控制背景图片是否重复。其他值包括repeat(默认，水平和垂直重复),repeat-x(水平重复),repeat-y(垂直重复).background-size: cover;: 这个属性也是可选的。它控制背景图片的大小。cover会缩放图片以覆盖整个元素，同时保持图片的宽高比。其他常用值包括contain(包含整个图片在元素内) 和具体的像素值或百分比。background-position: center;: 这个属性也是可选的。它控制背景图片在元素中的位置。center将图片置于中心。 你也可以使用其他值，例如top left,bottom right或具体的像素值或百分比。background-attachment: fixed;: 这是关键属性。它将背景图片固定在视口中，即使页面滚动，图片也不会移动。
示例 HTML:
<!DOCTYPE html>
<html>
<head>
<title>Fixed Background Image</title>
<style>
body {
background-image: url("your-image.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* 添加一些内容来演示滚动效果 */
.content {
padding: 20px;
height: 2000px; /* 足够高的内容来触发滚动 */
}
</style>
</head>
<body>
<div class="content">
<h1>这是一个标题</h1>
<p>这是一些文本内容，用于演示滚动效果。向下滚动页面，你会发现背景图片保持固定。</p>
</div>
</body>
</html>
记住将 "your-image.jpg" 替换为你实际的图片路径。 这个例子中， .content div 的高度设置为 2000px，是为了创建足够的内容来演示滚动效果，以便你可以看到背景图片是如何保持固定的。
希望这个解释能够帮助你!
标签：repeat,滚动,不随,滚动条,background,image,背景图片,图片 From： https://www.cnblogs.com/ai888/p/18589894