前端技巧集：大背景

背景

由来

看到XP的经典背景，有人会认为要讲XP的内容，其实不然，我们下面讲的与XP无关，讲的是HTML页面的CSS背景基础知识。(只是借用这张经典图片，使背景不在陌生。)

一般body背景都是用大图或者图片扩展，效果无非有二，这两种方式是以前很流行的。现在，在扁平化流行的情况下，很多网站已经不使用这种大图片背景了。但是还有一些老牌网站和政府机关网站还在使用。其实实现很简单，让我们学一下吧。

说明

下文代码中使用如下目录结构

Web前端项目
├─index.html
│
├─css
│  └─style.css
│
└─res
   └─背景.png

所以，CSS代码中的图片相对路径是从css文件夹下style.css开始算起的，先到上一级，再到img文件夹下。所以使用../img/这个目录。

固定背景

背景不随文本移动，例如百度背景。

1. 设置背景图片

background-image:url(../img/背景.png);

2. 设置背景平铺模式
   一般固定背景是不平铺no-repeat的。

background-repeat:no-repeat;

3. 固定背景

background-attachment:fixed;

以上三步可以在一条声明中完成：

background:url(../img/背景.png) no-repeat fixed;

不固定背景

背景随文字移动，这种背景一般使用颜色渐变的方式，使背景无限延伸。例如新浪微博背景。

1. 设置背景图片

background-image:url(../img/背景.png);

2. 设置背景平铺模式
   简单背景一般只作成一个图片条，使用水平平铺repeat-x，把背景平铺开来。

background-repeat:repeat-x;

稍微复杂一点的背景只是在背景的开始使用一张图片。背景是不平铺的，代码如下：

background-repeat:no-repeat;

3. 设置背景的颜色
   因为背景不是固定的，当文本的高度超过背景图片的时候，添加背景色使背景看上去连续，所以背景图片在尾部使用渐变色处理。

background-color:#f5f5f5;

以上三步可以在一条声明中完成：

background: #f5f5f5 url(../img/背景.png) repeat-x;

这种方式添加的背景一般都比较单调，经常在内容上还会加上一些背景图片，看上去更加丰富。OK,常用的背景设置方法get了吗？多加练习必然功成。

如有问题，请在下面留言。