揭秘CSS(第 1 版)
4.5.5 背景附着
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

边框

背景

背景位置

背景重复

背景图像

背景颜色

背景附着

在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 所示:

background-attachment:scroll效果
图4-30 background-attachment:scroll效果

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

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

background-attachment:local效果
图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 所示:

background-attachment:fixed效果
图4-32 background-attachment:fixed效果

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

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验