CSS背景附着（background-attachment）[编辑 | 编辑源代码]

CSS背景附着是CSS中控制背景图像滚动行为的属性，决定背景图像是相对于视口固定还是随内容滚动。该属性在创建视差滚动效果或固定背景时特别有用。

属性值[编辑 | 编辑源代码]

background-attachment 接受以下值：

scroll（默认值）：背景图像随元素内容滚动。
fixed：背景图像相对于视口固定，不随内容滚动。
local：背景图像随元素内容滚动（包括元素内部滚动）。

语法[编辑 | 编辑源代码]

selector {
    background-attachment: scroll | fixed | local;
}

详细说明[编辑 | 编辑源代码]

1. scroll[编辑 | 编辑源代码]

默认值。背景图像会随元素的内容一起滚动。如果元素有滚动条，背景图像不会随元素内部的滚动而移动。

示例：

.box {
    background-image: url("image.jpg");
    background-attachment: scroll;
    height: 200px;
    overflow: auto;
}

效果：

当页面滚动时，背景图像随元素移动。
如果元素内部有滚动条，滚动元素内容时背景图像保持固定。

2. fixed[编辑 | 编辑源代码]

背景图像相对于视口固定，即使页面或元素滚动，背景图像也不会移动。

示例：

body {
    background-image: url("image.jpg");
    background-attachment: fixed;
}

效果：

页面滚动时，背景图像保持固定。
常用于创建全屏固定背景效果。

3. local[编辑 | 编辑源代码]

背景图像随元素内容滚动。如果元素有滚动条，背景图像会随元素内部的滚动而移动。

示例：

.box {
    background-image: url("image.jpg");
    background-attachment: local;
    height: 200px;
    overflow: auto;
}

效果：

当元素内容滚动时，背景图像也会随之滚动。
适用于需要背景图像与内容同步滚动的场景。

对比示例[编辑 | 编辑源代码]

以下示例展示三种值的区别：

<div class="container">
    <div class="box scroll">scroll</div>
    <div class="box fixed">fixed</div>
    <div class="box local">local</div>
</div>

.container {
    height: 300px;
    overflow: auto;
}
.box {
    height: 600px;
    background-image: url("image.jpg");
    margin-bottom: 20px;
}
.scroll { background-attachment: scroll; }
.fixed { background-attachment: fixed; }
.local { background-attachment: local; }

观察结果：

scroll：背景图像随容器滚动，但容器内部滚动时背景不动。
fixed：背景图像始终固定。
local：背景图像随容器及内部内容滚动。

实际应用案例[编辑 | 编辑源代码]

1. 视差滚动效果[编辑 | 编辑源代码]

通过结合fixed和scroll，可以创建视差滚动效果：

.parallax {
    background-image: url("background.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}
.content {
    background-attachment: scroll;
}

2. 固定背景的登录页面[编辑 | 编辑源代码]

固定背景图像增强视觉体验：

body {
    background-image: url("login-bg.jpg");
    background-attachment: fixed;
    background-size: cover;
}

注意事项[编辑 | 编辑源代码]

fixed在移动设备上可能表现不一致，需测试兼容性。
背景图像较大时，fixed可能导致性能问题。
local对老旧浏览器支持有限。

总结[编辑 | 编辑源代码]

值	行为
`scroll`	背景随元素滚动，内部滚动时固定
`fixed`	背景相对于视口固定
`local`	背景随元素及内部内容滚动

通过合理使用background-attachment，可以创建丰富的视觉效果，提升用户体验。