掌握 `background-attachment: fixed`：打造固定背景滚动特效-编程实验室

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;/* 置于内容下方 */}