The principle of CSS Sprites (image integration technology)-sprite map (Sprite map)
-
Principle:
The navigation background images, buttons, background images and other regular combined into a background image, multiple images together as a whole diagram, and thenbackground-positionto realize the background image positioning technology. -
The advantages of image integration:
1) Through image integration to reduce the number of requests to the server, thereby improving the loading speed of the page.
2) Reduce the size of pictures by integrating pictures.
Use tools to make sprite maps:
- Use ps to create a layer, the background is transparent, copy the background image to the layer for arrangement:
select all the background images and drag them into ps, double-click each image in turn, and drag to arrange:
- Use tools for production:
Open the tool, select all the background images, drag into the tool, and automatically arrange the background images:
- Click Generate, two files will be generated: (a sprite image and an html file)
Picture:
html file:
<!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>
How to use:
First modify the name of the picture to CSS_Satyr.png for easy use.
<!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>
Finally, the background image will be displayed in the corresponding elements in turn