通过 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。