雪碧图

雪碧图（spirt）是将页面所需的多个图像合并到同一张大图片上，然后利用css的背景定位来显示需要显示的图片部分。
雪碧图可以减少http的请求，提升网页加载速度。较多应用在图标上，而背景及<img>标签设置的内容图片一般不使用雪碧图。

background-position

background-position 可用来设置背景图像的起始位置，而雪碧图即通过控制background-position属性值来显示需要的图片部分。

1	background-position: direction \| percentage \|length ;

direction：由两个值构成，第一个值可取left、right、center，第二个值可取top、bottom、center，如果仅指定一个值，另一个值将会是”center”
percentage：x% y%，第一个值是水平位置，第二个值是垂直，如果仅指定一个值，另一个值将会是50％
length：x y，第一个值是水平位置，第二个值是垂直位置，如果仅指定一个值，另一个值将会是50％

百分比：
x = (容器宽 - 背景图宽) x%
y = (容器高 - 背景图高) y%

1
2
3

<body>
    <div></div>
</body>

div {
    height: 350px;
    width: 350px;
    border: 1px solid black;
    background: url(bg.png)no-repeat;
    background-position: 100% 50%;}

数值：

1
2
3

<body>
    <div></div>
</body>

div {
    height: 350px;
    width: 350px;
    border: 1px solid black;
    background: url(bg.png)no-repeat;
    background-position: 100px 150px;}

雪碧图用法

一般用photoshop或者专业雪碧图合成工具都能轻松制作雪碧图，下面这张图片就是由多个小图标合成：
在用ps制作雪碧图时，可用参考线标示各个图标的位置。
在上图中，每个小图标的起始位置可用坐标表示。
facebook图标(左上)位置为（0，0）
twitter图标(右上)位置为（120px，0）
share图标(左下)位置为 x（0，120px）
rss图标(右下)位置为 x（120px，120px）

雪碧图即设置一个div，这个div的宽高为网页中这个图标所占位置的尺寸。之后为这个div插入背景图片，并且用background-position来移动背景图，使这个div显示雪碧图中需要显示的部分，而超出这个div范围的雪碧图则不会显示。
如果在网页中使用左上facebook的图标代码如下：

1 2	background: url(icon.png)no-repeat; background-position: 0 0;

如果在网页中使用右下rss的图标则代码为：

1 2	background: url(icon.png)no-repeat; background-position: -120px -120px;

每个小图标background-position设置的值就是这个小图标在雪碧图中坐标的相反数。
具象化表示雪碧图的运用：

background-size

如果页面中所需的图标尺寸并不等于雪碧图中这个图标的尺寸，这个时候我们就需要用到background-size来设置插入背景图的尺寸。
举例：

页面中小图标尺寸： 50px*50px
雪碧图中小图标尺寸：100px*100px
雪碧图尺寸：220px*220px

.icon1,
.icon2,
.icon3,
.icon4 {
    width: 50px;
    height: 50px;
    background: url(icon.png)no-repeat;}
.icon1 {
    background-size: 110px 110px;
    background-position: 0 0;}
.icon2 {
    background-size: 110px 110px;
    background-position: -50px 0;}
.icon3 {
    background-size: auto 110px;
    background-position: 0 -50px;}
.icon4 {
    background-size: 110px auto;
    background-position: -50px -50px;}

推荐一个在线制作雪碧图的网站