CSS 中除了布局类属性，还需要添加一些背景类的内容进行页面的修 饰，从而让网页变得更加的美观。 CSS 中通过 background 属性来设置背景，它是一个综合属性，可以拆分成多个单一属性。

背景颜色 background-color

background-color用于在盒子区域添加背景颜色的修饰，背景颜色的加载区域在border及以内，属性值是颜色名或颜色值。

背景图片 background-image

background-image用于给盒子添加图片的背景修饰，默认加载到边框及以内部分，如果图片不重复加载，则加载从border以内开始，属性值是url（图片路径），uniform resource locator，统一资源定位符，括号内书写查找图片的路径。

背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色。

背景重复 background-repeat

background-repeat用于设置添加背景图是否在盒子中重复进行加载。根据属性值不同有以下四种重复加载方式：

背景定位 background-position

background-position主要用于设置不重复的图片在背景区域的加载开始位置，属性值分三种写法，单词表明法、像素表明法、百分比表明法。不论哪种写法，属性值都有两个，值之间用空格分隔，第一个属性值表明背景图片在水平方向的位置，第二个属性值表明垂直方向的位置。

• 单词表明法：属性值都是使用代表方向的单词进行书写，水平方向可选单词left、center、right，垂直方向可以选单词top、center、bottom，单词表明图片与盒子背景区域进行对应方向的对齐。

• 像素表明法：使用像素值作为背景定位的属性值，第一个属性值表明背景图片左上角针对border以内的左上角顶点水平方向位移的距离，第二个属性值表明垂直方向位移的距离。可以利用属性值为负数，制作在小盒子中显示大的背景图的一部分。

  

• 百分比表明法：使用百分比数字作为属性值。水平方向100%的数值等价于盒子的border以内的背景区域宽度减去图片的宽度，垂直方向100%等价于高度减去图片的高度。

  

背景附着 background-attachment

background-attachment用于设置背景图片是否要随着页面或者盒子的滚动而滚动。

综合写法 background

background可以将五个单一属性的值进行合写，可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能分开也不能颠倒顺序，五个属性值之间可以互换位置。

<style>
  div { background: url(images/bg4.jpg) no-repeat center top fixed #fff; }
</style>

注意：
① 如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。

<style>
  div { background: #00f; }
</style>

② 如果想去层叠综合属性中的一部分，其他属性保持不变，最好实用单一属性写法进行层叠。

<style>
    div {
      background: url(images/bg4.jpg) no-repeat center top fixed #fff;
      background-attachment: scroll;
    }
</style>

背景应用

替换插入图

<h1>标签是权重最高的标签，一般会在内部书写最重大的内容，列如logo图片、最大的标题等。另外<h1>内部的文字，可以协助提高SEO搜索排名，在设置的是logo图片时，如果使用插入图，就不能书写搜索关键字。

<h1><a href="#"><img src="images/logo.png"></a></h1>

如果想解决SEO问题，可以将HTML结构中，插入图换成搜索关键字，然后使用CSS添加背景图给<a>标签或<h1>标签。

可以通过以下两个方法隐藏文字：
① 将字号设置为0。IE8及以上或者高版本浏览器可以隐藏文字，但是IE7及以下有兼容问题。
② 可以设置给<a>标签一个text-indent，属性值设为负数且数值很大，文字会走到盒子外部，再设置溢出隐藏，将溢出文字隐藏起来。

padding 区域背景图

在一个盒子中，背景图是和文字重叠的，而上图中列表的星标效果就是通过每个<li>元素的图片背景图居右显示之后，再通过padding-left将文字挤开，使得星标背景处于文字的左侧。

精灵图技术

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。不过，一个网页中往往会应用许多小的背景图像作为修饰，当网页中的图像过多时， 服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

CSS 精灵是一种处理网页背景图像的方式。 它将一个页面涉及到的所有零星背景图像都聚焦到一张大图中去，然后将大图应用 于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图 像即可全部展示出来。 一般情况下，这个由许多小的背景图像合成的大图被称为精灵图。

技术依据：① 将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片。 ② 利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。（可以使用一些小工具，快速生成精灵图。）前端必备 CSS Sprites雪碧图生成工具 – 简书 (jianshu.com)

注意事项：

1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。
2. 精灵图的宽度取决于最宽的那个背景图片的标签宽度。
3. 精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白， 保证背景图片加载到一个标签内部时，不能出现多余内容。
4. 在精灵图的最底端，尽量留一点空白，方便后来添加其他精灵图。

CSS3新增背景属性

背景半透明

CSS3 支持背景半透明的写法，颜色值增加了一种 rgba 模式，在 rgb 基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表明完全透明，1 表明完全不透明，0.5 表明半透明,背景半透明是指盒子背景半透明， 盒子里面的内容不受影响，书写方式：rgba(红色，绿色，蓝色，不透明度)，同样可以给文字和边框用rgba的格式设置半透明。

背景缩放 background-size

通过 background-size 设置背景图片的尺寸，就像我们设置 <img> 的尺寸一样，在 移动 Web 开发中做屏幕适配应用超级广泛。

多背景

CSS3 中规定，一个盒子上，可以添加多个背景图片。 background-image 的属性值书写时，以逗号分隔多背景的URL路径地址。 注意：背景加载时，先写的背景压盖后写的背景图片。