background-attachment: fixed 可实现背景图固定效果，页面滚动时背景不动，常用于全屏首屏大图或视差设计。需设置 background-image、确保容器有高度并配合 background-size: cover 以完全覆盖区域。注意移动端兼容性问题，部分浏览器如 iOS Safari 会忽略 fixed 效果；避免父元素使用 transform 等导致失效的属性，并优化图片性能以防止卡顿。
在CSS中，background-attachment: fixed 可以让背景图片相对于视口固定，即使页面滚动，背景图也不会跟着移动，从而实现常见的“视差”或“固定背景”效果。这个属性特别适合用于全屏背景图或希望突出视觉层次的模块。
基本语法与使用
background-attachment 的值为 fixed 时，背景图将固定在浏览器视口中，不随内容滚动。常用写法：
.hero {
background-image: url('bg.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
这段代码会让带有 class="hero" 的元素拥有一个铺满屏幕、固定不动的背景图。
关键点说明
- 必须设置背景图：background-attachment 只对设置了 background-image 的元素生效。
- 配合 background-size: cover 确保图片覆盖整个容器，避免留白。
- 容器需要有高度：如果元素高度为0，背景图无法显示。通常设置 height 或 min-height。
- 移动端兼容性注意：部分移动浏览器（如iOS Safari）会忽略 fixed 背景，自动转为 scroll，这是出于性能和用户体验的考虑。
常见应用场景
适用于以下情况：
- 首页大图展示（hero section）
- 分块式网页设计中的某个视觉锚点
- 营造滚动视差效果（结合其他滚动元素）
示例HTML结构：
立即学习“前端免费学习笔记（深入）”；
<div class="section fixed-bg"> <h2>欢迎来到我们的网站</h2> </div>
可能遇到的问题与解决方案
- 背景图没显示：检查路径是否正确，元素是否有足够高度。
- fixed 效果失效：父元素设置了 transform、perspective 等属性可能导致 fixed 失效，因为会创建新的层叠上下文。
- 性能问题：大图+fixed 可能导致滚动卡顿，建议压缩图片或使用现代格式如 WebP。
