通过 css 的 `background-attachment: fixed` 配合 `background-size: cover` 等属性，可让背景图在页面滚动时保持静止，而正文内容正常流动，营造出沉浸式视差效果。
要实现“背景图像固定不动、内容区域自由滚动”的经典视觉效果（常用于登录页、单页宣传站或作品集首页），核心在于正确设置
元素的背景行为。你当前使用的 linear-gradient 叠加图片的方式本身是可行的，但缺少关键的固定定位控制和尺寸适配逻辑。✅ 正确的 CSS 实现方案
只需在 body 上应用以下样式（推荐写入外部 CSS 或
body {
margin: 0; /* 清除默认边距，确保背景铺满 */
height: 100vh; /* 推荐使用 viewport 高度，而非 height: 100%（需父容器有高度） */
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)),
url('wallpaper.jpg');
background-size: cover; /* 图片等比缩放并填满整个背景区域 */
background-position: center; /* 居中对齐，避免偏移裁剪 */
background-repeat: no-repeat; /* 禁止平铺 */
background-attachment: fixed; /* 关键！使背景相对于视口固定，不随滚动移动 */
color: #fff; /* 建议设置文字颜色以保证可读性（尤其叠加半透明渐变后） */
}? 提示：background-attachment: fixed 是实现“视差静止背景”的核心属性。它会让背景图像绑定到浏览器视口（viewport），而非文档流，因此滚动时图像位置恒定。
? HTML 结构建议（简洁可靠）
固定背景示例 欢迎来到我的网站
向下滚动查看效果 →
……大量内容……
⚠️ 注意事项与常见问题
- height: 100% 不可靠：若设 body { height: 100%; }，需确保 html 也设为 height: 100%，且父级无塌陷；更稳妥的做法是使用 min-height: 100vh 或 height: 100vh（视口单位）。
- 移动端兼容性：部分 iOS Safari 版本对 background-attachment: fixed 支持有限（可能退化为 scroll）。如需强兼容，可考虑用伪元素 + position: fixed 模拟，或使用 JS 视差库（如 parallax.js）。
- 性能提示：fixed 背景在低端设备上可能触发重绘开销，建议图片压缩至合理尺寸（≤1MB），并启用 will-change: transform（谨慎使用）或添加 transform: translateZ(0) 作轻微硬件加速。
- 多背景叠加顺序：CSS 中 background-image 使用逗号分隔多个值，越靠前的图层越靠近用户（即渐变在上，图片在下），这与你的原始写法一致，无需调整。
✅ 总结
只需四步即可完成固定背景效果：
1️⃣ 清除 body 默认 margin；
2️⃣ 设置 background-attachment: fixed；
3️⃣ 使用 background-size: cover + background-position: center 保证美观适配；
4️⃣ 通过 linear-gradient 叠加遮罩提升文字可读性（可选但推荐）。
这样，你就能复刻 Wix 模板中那种沉稳大气、内容浮动于静止背景之上的专业视觉体验。
