What is Sprite map
Sprite figure is the CSS Sprite, was also called CSS sprites, CSS is an image combining technology, is to be incorporated into multi-Zhang icon on a picture, and then use the css background-position to display the section to be displayed.
Why use Sprite map
Can reduce the number of requests to the server when loading Web Images improve the loading speed of the page, appear to solve the IE6 flash white when the mouse rolls over the phenomenon.
What are the drawbacks with Sprite map
Personally think that if your Sprite figure is not very big, not very complex basically no drawbacks. If your sprite drawing a large and complex case, there appears css code review, page accounting problems of memory and large.
Examples
The above is a button and the second is like when the mouse over it
This is a small icon at the two Sprite FIG synthesis
<div class="user"><span></span>个人中心</div>
.user {
width: 108px;
height: 34px;
border:1px #ddd solid;
float: right;
margin-top: 36px;
line-height: 34px;
border-radius: 3px;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-ms-transition: all 0.3s;
}
.user span{
display: inline-block;
width: 20px;
height: 22px;
overflow:hidden;
margin:5px 10px 5px 10px;
float:left;
background-image:url(../img/user.png);
background-repeat: no-repeat;
background-position: 0px -22px;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-ms-transition: all 0.3s;
}
.user:hover {
border:1px #ff9600 solid;
color:#f00;
}
.user:hover span{
background-position: 0px 0px;
}
web前端开发学习Q-q-u-n： 491404389 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）These are the implementation of the code, please ignore this excessive self-effect (transition).
It was also not possible to determine the beginning of the picture position. Actually very simple, as long as you remember that picture is from the upper left corner (0,0) began.
I do not know whether this will see to understand