要设置背景图片不随着文本内容滚动，也就是使其固定在视口上，可以使用 CSS 的 background-attachment: fixed; 属性。
以下是如何在不同情况下应用此属性的方法：
1. 应用于 body 元素：
这将使背景图片固定在整个页面上，即使页面内容很长，背景图片也不会滚动。
body {
background-image: url("your-image.jpg");
background-repeat: no-repeat; /* 根据需要设置 */
background-size: cover; /* 根据需要设置 */
background-attachment: fixed;
}
2. 应用于特定容器：
如果您只想将背景图片固定在某个特定的 div 或其他容器中，可以将样式应用于该容器。
<div class="fixed-background">
<!-- 这里放置你的内容 -->
</div>
.fixed-background {
background-image: url("your-image.jpg");
background-repeat: no-repeat; /* 根据需要设置 */
background-size: cover; /* 根据需要设置 */
background-attachment: fixed;
}
3. 与其他背景属性一起使用：
background-attachment: fixed; 可以与其他背景属性（例如 background-repeat，background-position 和 background-size）一起使用，以实现所需的背景效果。
示例：
.fixed-background {
background-image: url("your-image.jpg");
background-repeat: repeat-x; /* 横向重复 */
background-position: center top; /* 图片位置 */
background-size: contain; /* 包含 */
background-attachment: fixed;
}
注意事项：
- 性能: 大量的固定背景图片可能会影响页面性能，尤其是在移动设备上。
- 视差效果: 虽然
background-attachment: fixed可以创建类似视差的效果，但真正的视差滚动通常需要 JavaScript 来实现更精细的控制。 - 移动端兼容性:
background-attachment: fixed在某些旧版浏览器或移动设备上可能存在兼容性问题，建议进行测试。 一些移动浏览器可能会忽略此属性，将其视为scroll。
通过使用 background-attachment: fixed;，您可以轻松地创建固定背景图片效果，从而增强网站的视觉吸引力。 记住根据你的具体需求调整其他背景属性，并注意潜在的性能问题。