通过 css 的 `background-attachment: fixed` 配合 `background-size: cover` 和 `background-repeat: no-repeat`，可让背景图随视口固定，内容滚动时图像保持静止。
要实现「背景图始终静止、页面内容自由滚动」的经典视差效果（常见于高端着陆页或作品集模板），核心在于正确设置
元素的背景行为。你当前使用的 linear-gradient 叠加背景是可行的，但缺少关键属性——background-attachment。✅ 正确的 CSS 方案
只需在 body 样式中添加以下声明：
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 边距，避免空白 */
height: 100vh; /* 推荐使用 vh 而非 %，确保初始高度准确 */
}? 注意：background-attachment: fixed 在移动端部分浏览器（如早期 iOS Safari）中可能被忽略或降级为 scroll。若需强兼容，建议搭配 JavaScript 模拟（如 position: sticky 容器 + z-index 分层），但绝大多数现代桌面/Android 浏览器均原生支持。
? 完整 HTML 示例（含语义化优化）
固定背景滚动内容 欢迎来到我的网站
向下滚动查看效果 —— 背景图将保持完全静止，而文字与容器正常滚动。
...
⚠️ 常见问题与建议
- 图片加载失败？ → 使用 background-image: url(...), url() 中路径需确保可访问；建议添加 background-color: #222 作为降级色。
- 文字看不清？ → 如示例所示，叠加半透明渐变（linear-gradient）或使用 backdrop-filter + 半透明白色文字，显著提升可读性。
- 高度异常？ → 避免仅设 height: 100%，改用 min-height: 100vh，兼顾内容高度超出视口的情况。
- SEO 与语义？ → 不推荐将背景图写在内联 style 中（如答案示例），应统一置于
掌握 background-attachment: fixed 这一特性，即可轻松复刻 Wix、Webflow 等平台中高级的沉浸式背景体验——简洁、高效、无需 JS。
