编辑“︁CSS背景附着（background-attachment）”︁（章节）

= CSS背景附着（background-attachment） =

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

== 属性值 ==
<code>background-attachment</code> 接受以下值：
* <code>scroll</code>（默认值）：背景图像随元素内容滚动。
* <code>fixed</code>：背景图像相对于视口固定，不随内容滚动。
* <code>local</code>：背景图像随元素内容滚动（包括元素内部滚动）。

== 语法 ==
<syntaxhighlight lang="css">
selector {
    background-attachment: scroll | fixed | local;
}
</syntaxhighlight>

== 详细说明 ==

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

'''示例：'''
<syntaxhighlight lang="css">
.box {
    background-image: url("image.jpg");
    background-attachment: scroll;
    height: 200px;
    overflow: auto;
}
</syntaxhighlight>

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

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

'''示例：'''
<syntaxhighlight lang="css">
body {
    background-image: url("image.jpg");
    background-attachment: fixed;
}
</syntaxhighlight>

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

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

'''示例：'''
<syntaxhighlight lang="css">
.box {
    background-image: url("image.jpg");
    background-attachment: local;
    height: 200px;
    overflow: auto;
}
</syntaxhighlight>

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

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

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

<syntaxhighlight lang="css">
.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; }
</syntaxhighlight>

'''观察结果：'''
* <code>scroll</code>：背景图像随容器滚动，但容器内部滚动时背景不动。
* <code>fixed</code>：背景图像始终固定。
* <code>local</code>：背景图像随容器及内部内容滚动。

== 实际应用案例 ==

=== 1. 视差滚动效果 ===
通过结合<code>fixed</code>和<code>scroll</code>，可以创建视差滚动效果：
<syntaxhighlight lang="css">
.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;
}
</syntaxhighlight>

=== 2. 固定背景的登录页面 ===
固定背景图像增强视觉体验：
<syntaxhighlight lang="css">
body {
    background-image: url("login-bg.jpg");
    background-attachment: fixed;
    background-size: cover;
}
</syntaxhighlight>

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

== 总结 ==
{|
|-
| '''值''' || '''行为'''
|-
| <code>scroll</code> || 背景随元素滚动，内部滚动时固定
|-
| <code>fixed</code> || 背景相对于视口固定
|-
| <code>local</code> || 背景随元素及内部内容滚动
|}

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

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS颜色与背景]]