css的background属性以及其具体应用案例---制作精灵图
css里面的background属性是一个缩写的属性，我们常用的写法比如background:red，其实它是省略了其他的background的控制，background属性是哪些属性的缩写呢？background的格式又是什么样子的呢？
背景：background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
其中，[]表示可以省略。
background-color：背景的颜色，可以是#xxx三个数字来表示的颜色，也可以是#xxxxxx六个数字来表示的颜色，还可以是css里面预定义的颜色，比如red,yellow等。
background-image:定义背景的图片，需要用url来指定。比如background-image:url(./logo.png)。 “./”表示当前目录下,"../"表示上级目录的下面，在web开发中，也可以使用绝对的路径来表示
background-repeat可用值如下：
repeat 默认。背景图像将可以在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像不重复，仅显示一次
background-attachment可用值如下：
scroll(默认)：背景图像会随着页面其余部分的滚动而移动,当页面过长时，背景图像因为会随着页面移动而滚动的特性就"滚出"窗口的可视范围了。
fixed：当页面的其余部分滚动时，背景图像不会移动。总是可见的。
background-position：x y 。其中x与y分别表示背景图片距离从左到右的水平距离和从上到下的垂直距离。值可以是百分比，也可以是具体的像素，还可以是预定义的top left bottom center right等的组合。
------------------------------------------------------------------------background制作精灵图---------------------------------------------------------------
css精灵图：又叫雪碧图，为什么会出现呢？我们知道页面的每一个图片的成功加载都需要去服务器上发送一个请求，当页面上有很多的图片的时候，这个页面就需要向服务器发送很多个请求，这样不仅给服务器造成了很大的压力，也减慢了页面的加载速度，所以人们常常把一些小的图片放在一个大的图片中，在页面显示某一个小的图片的时候，通过background属性的background-position来控制某一个小图片的显示，通过这种方式达到减缓服务器压力，加快页面加载速度的目的。
看下面这个例子：
微博上显示微博等级的时候，有个小皇冠，这个小皇冠是个很小的图片，它被存放在了下面这样一个大的图片中：
看到了吧，哦，原来有这么多图片都在一张图片里面啊，那么它是怎么达到控制显示某一个小图片的目的的呢？通过background属性，更具体更准确的说是通过background-position属性。下面是实现这种效果的代码。
html代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>精灵图</title> </head> <body> <div class="sprites"> <h2>陈奕迅所长<span></span></h2> </div> </body> </html>
css代码：
<style>
.sprites{
background:url("sprites_bg.png") repeat-x left top;
width: 100%;
height: 501px;
text-align: center;
overflow: hidden;
}
h2{
margin-top: 150px;
color: #fff;
font-size: 24px;
}
span{
background-image: url("icon.png");
background-position: -24px -121px;
display: inline-block;
width: 20px;
height: 20px;
}
</style>
以上就是css的精灵图。