CSS 背景附着 background-attachment属性

在CSS中，通过 body 元素 background-image 属性来定义整个窗体的背景图像，通过其他元素自身的 background-image 属性来定义元素自己的背景图像。

定义背景图像之后，默认情况下，当窗体的内容滚动时，窗体的背景图像会跟着一起移动，其他元素的背景图像则不同，始终相对于元素固定不动，不会跟着元素内容一起移动。

CSS提供了 background-attachment属性，可以灵活控制背景图像是跟着元素的内容一起移动，还是固定不动。其可选值有 scroll | fixed | local，默认值为 scroll。

其中，fixed 只对 body 元素有效，local 只对 body 之外的其他元素有效，scroll 则对任何元素都有效。不同取值的含义见表表 4‑6：

表 4‑6 background-attachment属性的取值及含义

属性值	含义
fixed	背景图像相对于窗体固定。任凭页面内容滚动，背景图像始终静止不动
scroll	背景图像相对于元素固定。当窗体的内容滚动时，窗体的背景图像会跟着移动；当一般元素的内容滚动时，背景图像不会跟着移动，因为背景图像总是要跟着元素本身，但会随元素的祖先元素或窗体一起移动
loca	背景图像相对于元素的内容固定。当元素的内容滚动时，背景图像总是要跟着内容一起移动

先来看看一般元素的效果。假设把一个容器 div 的 background-attachment 属性值设置为 scroll，因为要查看容器滚动时的效果，要把容器的 overflow 属性设置为 scroll，还要限制容器的尺寸，以便在内容溢出时能产生滚动条。代码如下：

1. div {
2. width: 160px;
3. height: 160px;
4. overflow: scroll;
5. background-attachment: scroll;
6. background-repeat: no-repeat;
7. background-image:url(img/bg.gif);
8. }

<div>定义背景图像之后， …，不会随着元素自身滚动条的滚动而移动。</div>

上述代码的运行结果如图 4‑30 所示：

图4-30 background-attachment:scroll效果

从上图可以看出，元素内容的滚动条已经向下滚动到达元素的底部，而背景图像并没有随着元素内容的滚动而移动。

现在，把 div 的 background- attachment属性值设置为 local。运行结果如图 4‑31 所示：

图4-31 background-attachment:local效果

从上图可以看出，元素内容的滚动时，背景图像跟着内容一起移动。另外，对于一般元素，无论其 background-attachment属性是什么值，如果该元素的祖先元素或窗体发生滚动，则该元素连同其背景图像，会作为一个整体，跟着一起移动。

先来看看一般 body 元素的效果。如果把 body 元素的 background- attachment 属性值设置为 scroll，当窗体的内容滚动时，窗体的背景图像会跟着一起移动。这个比较简单，就不再举例。

现在看看 body 的固定背景，假如为 body 元素定义了背景图像，背景图像在整个窗体的中央，位置固定，且不重复。CSS代码如下：

1. body {
2. background-position: 50% 50%;
3. background-repeat: no-repeat;
4. background-attachment: fixed;
5. background-image: url(img/bg.gif);
6. }

上述代码的运行效果如图 4‑32 所示：

图4-32 background-attachment:fixed效果

从上图可以看出，整个窗体的滚动条已经向下滚动，到达页面的中间，而窗体的背景图像始终静止不动，保持在整个窗体的中央。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。