CSS Sprites的原理（图片整合技术）----精灵图（雪碧图）
-
原理：
将导航背景图片、按钮背景图片等有规则的合并成一张背景图，将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术。 -
图片整合的优势：
1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。
2）通过整合图片来减小图片的体积。
利用工具制作精灵图：
- 使用ps创建图层，背景透明，将背景图复制到该图层中进行排列：
将背景图全部选中拉进ps，依次双击出现每个图片，拖动进行排列：
- 使用工具进行制作：
打开工具，将背景图全部选中，拖进工具，自动对背景图进行排列：
- 点击生成，会产生两个文件：（一张精灵图以及一个html文件）
图片：
html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body, ul, li {
margin: 0; padding: 0; font-size: 14px;}
body {
padding: 30px; background-color: #ccc;}
ul {
margin: 5px 0 10px 0;}
ul li {
list-style: none; display: block;}
li.classname {
font-weight: bold; }
.csscode, pre {
padding: 10px; border: 1px solid #999; display: block; background-color: #fff; width: 100%; font-size: 12px; line-height: 200%;}
li.classmark {
font-size: 12px; margin: 5px; line-height: 160%; display: none;}
/*
一下代码由程序自动生成。
*/
.pic {
background-image: url("CSS Satyr.png"); display: block;}
.pic_1 {
background-position: -0px -0px; width: 7px; height: 4px; }
.pic_2 {
background-position: -7px -0px; width: 10px; height: 14px; }
.pic_3 {
background-position: -17px -0px; width: 17px; height: 16px; }
.pic_4 {
background-position: -34px -0px; width: 21px; height: 18px; }
.pic_5 {
background-position: -55px -0px; width: 19px; height: 16px; }
//-->
</style>
<title>CSS Satyr - http://shen.li/</title>
</head>
<body>
<h2>CSS Satyr</h2>
<ul>
<li>版本：1.2.0.0</li>
<li>作者：shen.li</li>
<li>主页：<a href="http://shen.li/blog/post/C_sharp/CSS_Satyr.html" target="_blank">http://shen.li/blog/post/C_sharp/CSS_Satyr.html</a></li>
<li>图片：<a href="CSS Satyr.png">C:\Users\李欣欣\Desktop\CSS Satyr.png</a></li>
</ul>
<h2>CSS 代码</h2>
<pre>
.shen_li {background-image: url("CSS Satyr.png"); display: block;}
.pic_1 {background-position: -0px -0px; width: 7px; height: 4px; }
.pic_2 {background-position: -7px -0px; width: 10px; height: 14px; }
.pic_3 {background-position: -17px -0px; width: 17px; height: 16px; }
.pic_4 {background-position: -34px -0px; width: 21px; height: 18px; }
.pic_5 {background-position: -55px -0px; width: 19px; height: 16px; }
</pre>
<h2>调用效果</h2>
<ul><li class="classname">jiantou.png</li><li><div class="csscode"> <span class="pic pic_1"> ... </span></div></li><li class="classmark">jiantou.png</li><li class="pic pic_1"></li></ul>
<ul><li class="classname">phone.png</li><li><div class="csscode"> <span class="pic pic_2"> ... </span></div></li><li class="classmark">phone.png</li><li class="pic pic_2"></li></ul>
<ul><li class="classname">qq.png</li><li><div class="csscode"> <span class="pic pic_3"> ... </span></div></li><li class="classmark">qq.png</li><li class="pic pic_3"></li></ul>
<ul><li class="classname">scar.png</li><li><div class="csscode"> <span class="pic pic_4"> ... </span></div></li><li class="classmark">scar.png</li><li class="pic pic_4"></li></ul>
<ul><li class="classname">tel.png</li><li><div class="csscode"> <span class="pic pic_5"> ... </span></div></li><li class="classmark">tel.png</li><li class="pic pic_5"></li></ul>
</body>
</html>
使用方法：
先将图片名字修改成CSS_Satyr.png ,方便使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精灵图使用</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 复制自上面的html文件，表示设置精灵图中背景图的标签添加类名pic */
.pic {
background-image: url("images/CSS_Satyr.png");
/* 修改图片路径 */
display: block;
}
/* 第一个背景图在精灵图的位置信息，下面相同，都是由工具自动生成 */
.pic_1 {
background-position: -0px -0px;
width: 7px;
height: 4px;
}
.pic_2 {
background-position: -7px -0px;
width: 10px;
height: 14px;
}
.pic_3 {
background-position: -17px -0px;
width: 17px;
height: 16px;
}
.pic_4 {
background-position: -34px -0px;
width: 21px;
height: 18px;
}
.pic_5 {
background-position: -55px -0px;
width: 19px;
height: 16px;
}
</style>
</head>
<body>
<span class="pic pic_1"></span>
<span class="pic pic_2"></span>
<span class="pic pic_3"></span>
<span class="pic pic_4"></span>
<span class="pic pic_5"></span>
</body>
</html>
最后背景图就会依次显示在对应的元素中