background-attachment是 CSS 中用于控制背景图像滚动行为的属性，其中fixed取值是最常用且最具视觉冲击力的选项——它能让背景图像固定在浏览器视口，不随页面滚动而移动，从而实现前景内容滚动、背景静止的高级视觉效果。
一、属性基础
1. 核心语法
选择器{background-image:url("背景图片路径");background-attachment:fixed;/* 配合其他背景属性使用 */background-position:center;background-repeat:no-repeat;background-size:cover;}2.background-attachment取值对比
| 取值 | 效果 |
|---|---|
fixed | 背景图像固定在视口，页面滚动时背景不动 |
scroll | 默认值，背景图像随元素内容一起滚动 |
local | 背景图像随元素的滚动容器一起滚动（较少用） |
二、基础实战：固定背景全屏区块
我们先做一个最简单的全屏固定背景区块，步骤如下：
1. HTML 结构
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>fixed 背景特效</title><linkrel="stylesheet"href="style.css"></head><body><sectionclass="fixed-bg"><h1>固定背景，滚动内容</h1></section><divclass="content"><p>这里是滚动的前景内容...</p><!-- 重复多段文本，方便测试滚动 --><p>测试滚动效果测试滚动效果测试滚动效果</p><p>测试滚动效果测试滚动效果测试滚动效果</p><p>测试滚动效果测试滚动效果测试滚动效果</p><p>测试滚动效果测试滚动效果测试滚动效果</p></div></body></html>2. CSS 样式
/* 初始化样式 */*{margin:0;padding:0;box-sizing:border-box;}/* 固定背景区块 */.fixed-bg{width:100%;height:100vh;/* 占满视口高度 *//* 核心背景属性 */background-image:url("https://picsum.photos/id/10/1920/1080");background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;/* 背景铺满区块，保持比例 *//* 文字居中 */display:flex;justify-content:center;align-items:center;color:#fff;font-size:3rem;text-shadow:0 0 10px #000;}/* 前景内容 */.content{padding:5rem 2rem;background-color:#fff;font-size:1.2rem;line-height:1.8;}3. 效果说明
滚动页面时，section.fixed-bg的背景图像会固定在视口，只有下方的.content区域会滚动，形成强烈的视觉分层感。
三、进阶技巧：多区块固定背景
可以在页面中设置多个固定背景区块，打造沉浸式滚动体验，核心思路是重复固定背景的 CSS 写法，更换不同背景图。
示例 CSS 片段：
.fixed-bg-1{background-image:url("图1路径");background-attachment:fixed;/* 其他背景属性同上 */}.fixed-bg-2{background-image:url("图2路径");background-attachment:fixed;/* 其他背景属性同上 */}四、常见问题与解决方案
1. 移动端兼容性问题
background-attachment: fixed在部分移动端浏览器（如 iOS Safari）表现异常，背景会随页面滚动，而非固定。
解决方案：
- 移动端使用
position: fixed的伪元素替代：.fixed-bg{position:relative;overflow:hidden;}.fixed-bg::before{content:"";position:fixed;/* 伪元素固定在视口 */top:0;left:0;width:100%;height:100%;background-image:url("背景图路径");background-position:center;background-size:cover;z-index:-1;/* 置于内容下方 */}
2. 背景图像拉伸变形
原因：未设置background-size或取值不当。
解决方案：
- 使用
background-size: cover：背景铺满区块，超出部分裁剪，保持比例。 - 使用
background-size: contain：背景完整显示，可能留空，适合小图标背景。
3. 性能问题
固定背景会增加浏览器渲染压力，尤其是高清大图。
优化方案：
- 压缩背景图片（推荐 TinyPNG 工具）。
- 避免在同一个页面使用过多固定背景区块。
五、使用注意事项
- 背景图建议选择分辨率高、对比度适中的图片，避免文字与背景融合导致可读性差。
- 搭配
text-shadow或半透明遮罩层，可以提升前景文字的辨识度。 - 不要滥用固定背景，过多特效会让页面显得杂乱，影响用户体验。
