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，还要限制容器的尺寸，以便在内容溢出时能产生滚动条。代码如下：

div {
width: 160px;
height: 160px;
overflow: scroll;
background-attachment: scroll;
background-repeat: no-repeat;
background-image:url(img/bg.gif);
}

<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代码如下：

body {
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url(img/bg.gif);
}

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

图4-32 background-attachment:fixed效果

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

关于作者

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

CSS 背景附着 background-attachment属性相关推荐

CSS背景（background）
CSS背景backgroud 背景颜色(color) 背景图片(image) 背景平铺(repeat) 背景位置(position)重点背景附着背景简写背景透明(CSS3) 背景总结理解背景 ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...
css 背景颜色 background属性
背景颜色 background 含义: 背景是指在盒子结构中,衬托在边框线范围以内的背景颜色或背景图. 可以设置背景颜色,或背景图,或同时设置.其中背景图有多项参数可设置. 主要的背景属性设置有: 设 ...
CSS背景（background）篇
1. background概述 CSS 可以添加背景颜色和背景图片,以及来进行图片设置. 属性描述 background-color: 背景颜色 background-image: 背景图片地址 b ...
七、CSS背景（background简写）
CSS 背景属性用于定义 HTML 元素的背景,通过背景属性我们可以定义元素的背景颜色.背景图片.背景图片的平铺方式和显示位置等. 1.background-color background-colo ...
css背景的设置及属性
背景 1.背景色:background-color 2.背景图:background-image: url( url) 3.background-repeat:是否平铺取值:no-repeat/re ...
css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
html5 固定背景,css 背景固定样式background-attachment属性基础
一.background-attachment属性在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动. 语法: background-at ...
背景（background）属性
background(背景属性) background-attachment:背景图像是否固定或者随着页面的其余部分滚动 scroll:背景图片随着页面的其余部分滚动 fixed:背景图片是固定的 i ...

CSS 背景附着 background-attachment属性

CSS 背景附着 background-attachment属性相关推荐

最新文章

热门文章