通过 css 的 background-attachment: fixed 配合 background-size: cover 等属性，可让背景图在页面滚动时保持静止，而正文内容自由滚动，营造出沉浸式视差效果。
要实现「背景图像固定不动、内容区域独立滚动」的效果（即常说的 fixed background 或 parallax-ready background），关键在于正确设置 background-attachment 属性。你当前使用的线性渐变叠加图片的方式本身是可行的，但缺少让背景“锁定”的核心声明。
✅ 正确的 CSS 核心写法
body {
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)),
url('wallpaper.jpg');
background-size: cover; /* 图片铺满视口，等比缩放 */
background-repeat: no-repeat; /* 防止平铺 */
background-attachment: fixed; /* ✨ 关键！使背景相对于视口固定 */
background-position: center; /* 居中对齐，提升视觉稳定性 */
margin: 0; /* 清除默认 body 边距，确保全屏生效 */
min-height: 100vh; /* 推荐：确保 body 至少占满视口高度 */
}⚠️ 注意：background-attachment: fixed 在移动端 Safari 中可能失效或表现异常（尤其 iOS < 15）。如需兼容移动设备，建议改用 position: fixed + 伪元素方案（见下方进阶技巧）。
? 完整 HTML + CSS 示例（推荐分离写法）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>固定背景滚动内容</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('wallpaper.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
padding: 2rem;
min-height: 100vh;
}
main {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2; /* 确保内容在背景之上（尤其有半透明层时） */
}
h1 { font-size: 2.5rem; margin-bottom: 1.5rem; }
p { margin-bottom: 1.2rem; }
</style>
</head>
<body>
<main>
<h1>欢迎来到我的网站</h1>
<p>这里的内容可以自由滚动，而背景图始终保持静止——这就是 <code>background-attachment: fixed</code> 的魔力。</p>
<!-- 更多长段落内容... -->
</main>
</body>
</html>? 补充说明与最佳实践
- height: 100% 不够，要用 min-height: 100vh：仅设 height: 100% 依赖父容器高度，而 <html> 默认无高度；100vh 明确指定为视口高度，更可靠。
- 避免内联样式：示例中虽用了内联 style 演示，但实际开发中强烈建议将样式移至 <style> 或外部 CSS 文件，便于维护与复用。
-
移动端兼容替代方案（进阶）：
若需完美支持 iOS Safari，可用伪元素模拟固定背景：body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('wallpaper.jpg') center/cover no-repeat; z-index: -1; }并移除 body 上的背景相关声明，仅保留渐变层（可加在 body 或 ::after 上）。
✅ 总结
只需四步即可实现理想效果：
① 使用 background-image 设置图片（支持多层叠加，如渐变+图片）；
② 添加 background-attachment: fixed 锁定背景；
③ 配合 background-size: cover 和 background-position: center 保证美观适配；
④ 设置 min-height: 100vh 与 margin: 0，消除布局干扰。
这样，你的页面就能像 Wix 模板那样，拥有稳如磐石的背景图和流畅滚动的前景内容了。
