CSS 背景附着

背景附着是CSS中用于控制背景图片如何随页面滚动而移动的属性，它可以创建固定背景或滚动背景效果。

基本语法

css 
元素选择器 {
  background-attachment: 附着方式;
}

附着方式的取值

background-attachment属性支持以下取值：

1. scroll（默认值）

scroll是background-attachment的默认值，它表示背景图片随元素内容一起滚动：

css 
.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-attachment: scroll;
}

当页面滚动时，背景图片会相对于元素移动，而不是相对于视口。

2. fixed

fixed表示背景图片固定在视口中，不随页面滚动而移动：

css 
.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

当页面滚动时，元素内容会滚动，但背景图片保持在视口中的固定位置。

3. local

local是CSS3新增的值，它表示背景图片随元素的内容一起滚动：

css 
.element {
  background-image: url('images/pattern.png');
  background-repeat: repeat;
  background-attachment: local;
  height: 200px;
  overflow: auto;
}

当元素内部的内容滚动时，背景图片也会随之滚动；当页面滚动时，元素及其背景图片会一起滚动。

应用场景

1. 固定背景图片

创建固定的全屏背景图片，实现视差滚动效果：

css 
body {
  background-image: url('images/fixed-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

2. 滚动背景图片

创建随页面滚动的背景图片：

css 
.section {
  background-image: url('images/section-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
  height: 600px;
}

3. 元素内部滚动背景

为可滚动的元素创建内部滚动背景：

css 
.content {
  background-image: url('images/texture.png');
  background-repeat: repeat;
  background-attachment: local;
  height: 300px;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid #ccc;
}

4. 视差滚动效果

使用固定和滚动背景图片的组合，创建视差滚动效果：

css 
.parallax {
  background-image: url('images/parallax-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  height: 500px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-content {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px 40px;
  border-radius: 5px;
  text-align: center;
}

与其他背景属性的结合

background-attachment通常与其他背景属性结合使用：

css 
.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

浏览器兼容性

浏览器 支持情况
Chrome 完全支持
Firefox 完全支持
Safari 完全支持
Edge 完全支持
IE IE6及以上支持scroll和fixed，不支持local

local值在IE9及以下浏览器中不支持。

性能考虑

使用fixed背景图片时需要注意性能问题，特别是在移动设备上：

  1. 性能影响：固定背景图片可能会导致滚动性能下降，特别是在移动设备上。

  2. 移动设备优化：在移动设备上，可以考虑使用媒体查询禁用固定背景图片：

css 
@media (max-width: 768px) {
  .parallax {
    background-attachment: scroll;
  }
}
  1. 图片优化：确保背景图片经过适当的压缩和优化，减小文件大小。

总结

background-attachment是CSS中用于控制背景图片滚动行为的重要属性，它支持scroll、fixed和local三种取值。合理使用background-attachment可以创建各种视觉效果，如固定背景、视差滚动等，但需要注意性能问题和浏览器兼容性。

最后更新：2026-02-07