CSS Sprite Tips

Css Sprite as a front-end personnel must be mastered, but this for the students just learning is difficult, the following I specifically for this content to do a share, there is no network image address, if the content is not fully displayed you can go to my personal blog
? 1. Code [CSS] Code
Csssprites in the domestic many people called the CSS Wizard, is a Web page image application processing way. It allows you to include all the scattered images of a page in a large image, so that when you visit the page, the loaded picture will not be shown as a picture of the past.　　For the current popularity of the network speed, no more than 200KB of a single picture of the required loading time is basically the same, so there is no need to worry about this problem. The key to acceleration is not to reduce weight, but to reduce the number. Traditional cut drawings pay attention to fine, picture specifications smaller the better, the smaller the weight of the better, in fact, size does not matter, computer unification is calculated in bytes. The client sends a request to the server for each picture that is displayed. As a result, the more images you request, the greater the likelihood of delay.

CSS sprites is actually to integrate some of the background image into a picture file, and then use the CSS "Background-image", "Background-repeat", "Background-position" The combination of the background positioning, background-position can be used to accurately locate the position of the background image.

Below I will explain in detail his use of skills, package you do not understand the children's shoes will have a clear new understanding, although there are such tools, but still have to understand his principles, skills to do also will be very quick to complete the positioning, below I share add a case.

First of all, because the need to locate the background is merged in a graph, so are all a cut, either the x-axis coordinate or the y-coordinate of the same, there is I want to tell the following 2 kinds of.

1. Transverse positioning coordinates

The horizontal positioning coordinate means the Y coordinate is fixed, it is characterized by the height of each icon is consistent, by changing the position of the x-coordinate to change the background. Just measure the width of each icon to know the coordinates of the x-axis. If you don't know this rule, I'll explain it to you below, taking the 2 cases I've done.

：

Http://m1.img.libdd.com/farm5/2012/0828/08/1F97A4B232E0D41ECD68D52EBE037A9555BBCB189977_500_22.jpg


Actual background map:
Http://m1.img.libdd.com/farm5/2012/0828/08/A2E67666F292DF6649411ED2851CEFE87EDCFC5EF698_404_46.JPEG



So specifically, how to position the solution, here is to change the x-coordinate to locate.

Because the heights are all the same, the coordinates on the Y axis are 0 or top.

Here each icon I use a span to do the background, the following specific analysis of the code:

<div class= "Join C" >
<strong>join US on:</strong>
<ul class= "C" >
<li><a href= "https://www.facebook.com/Fancyladies" ><span class= "SL" >Facebook</span>< Span class= "Sharelogo Facebooklogo" ></span></a></li>
<li><a href= "http://pinterest.com/fancyladies/" ><span class= "SL" >Pinterest</span>< Span class= "Sharelogo Pinterestlogo" ></span></a></li>
<li><a href= "Https://twitter.com/fancyladiescorp" ><span class= "SL" >Twitter</span>< Span class= "Sharelogo Twitterlogo" ></span></a></li>
<li><a href= "http://www.flickr.com/photos/fancyladies" ><span class= "SL" >flickr</span> <span class= "Sharelogo Flickrlogo" ></span></a></li>
<li><a href= "http://www.youtube.com/user/fancyladiescom" ><span class= "SL" >Youtube</span> <span class= "Sharelogo Youtubelogo" ></span></a></li>
<li><a href= "http://www.fancyladies.com/blog/" ><span class= "SL" >blog</span><span class = "Sharelogo Bloglogo" ></span></a></li>
</ul>
</div>
Here is the CSS code:

. Sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url (.. /images/shareicon.jpg); background-repeat:none;}

. facebooklogo{background-position:0 0;width:20px;}

. pinterestlogo{background-position:-20px 0;width:42px;}

. twitterlogo{background-position:-62px 0;width:30px;} /**/

. flickrlogo{background-position:-92px 0;width:130px;}

. youtubelogo{background-position:-222px 0;width:98px}

. bloglogo{background-position:-320px 0;width:84px;}

. sl{float:left;padding-right:10px;}

Their background images are common to this background: Background-image:url (.. /images/shareicon.jpg);

The background of each element is not allowed to repeat: that is: background-repeat:no-repeat;

As you read here, you find that the coordinates of each element are equal to the coordinate value of the preceding element plus the width. That is, the element's transverse coordinate value formula equals. The coordinate value of the adjacent element plus the width.

The value of Pinterestlogo is equal to the coordinate value of Facebooklogo. 20px+facebooklogo width 20px; it's simple, as long as you know the width of the element, because the horizontal coordinates must be given a fixed width, So this step of measuring width is not a waste of time. Want to look carefully at the source code of the coordinate values of the law.

Both horizontal and vertical positioning coordinates, their starting position is background-position:0 0, while the horizontal positioning of the height is fixed, so each time only need to change the value of x-coordinate to achieve.

For example, Facebook logo is the starting position of the icon, so its coordinate value is 0, 0, the implementation of its positioning.

Then Pinterest's logo is the next one, which is calculated from the negative width of Facebook. Since the width of Facebook is 21px, so Pinterest's logo coordinates are background-position:-20px 0; below and so on

Twitterlogo is the Pinterstlogo of the following, then it is pinterstlogo coordinates with the value of the Pinterstlogo

The width of the Twitterlogo, it gets the coordinates of the position. IS-(20px+42px) =-62px; that is, the coordinate value of Twitterlogo is. twitterlogo{background-position:-62px 0;width:30px;}

As you read here, one rule is that the coordinates of each adjacent element are equal to the coordinate value of the preceding element plus the width of the preceding element. That is, the horizontal coordinate value of the element company equals. The coordinate value of the adjacent element plus its width. Okay, here's the second option.

2. Longitudinal position coordinates

The longitudinal coordinates are fixed by the x-axis coordinates, the coordinates of the y-axis are changed to achieve the background change, their widths are fixed, so their x-axis coordinates are always the same, that is, 0 or left. Let me share a case

：

Http://m3.img.libdd.com/farm5/2012/0828/21/2F59B3DC34AD60610C0CC7BDE87645D4C4799F5EF698_81_255.JPEG


Actual background Image:
Http://m1.img.libdd.com/farm5/2012/0828/21/641A797EC6A263EAE69FE1A6D81BB0945AEB839BE40C_32_148.JPEG

CSS Code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
ul{margin:0;padding:0;float:left;width:32px;}
UL Li{float:left;list-style-type:none;width:32px;background-image:url (image/bg.jpg); background-repeat:none; margin:10px 0;}
. f{background-position:0 0;height:32px;} http://www.huiyi8.com/hunsha/wedding photography?
. p{background-position:0 -32px;height:20px}/*y Axis coordinates equal to the starting position of the height i.e.:-(0+32) */
. fr{background-position:0 -52px;height:32px;} /* equals the y-coordinate of the preceding element plus the height of the preceding element, i.e.:-(32+20) */
. h{background-position:0 -84px;height:32px;} /* equals the y coordinate of the preceding element plus the height of the preceding element * i.e.:-(52+32) */
. t{background-position:0 -116px;height:32px;} /* equals the y-coordinate of the preceding element plus the height of the preceding element, i.e.:-(84+32) */
</style>

<body>
<ul>

<li class= "F" ></li>
<li class= "P" ></li>
<li class= "FR" ></li>
<li class= "H" ></li>
<li class= "T" ></li>
</ul>
</body>
3. Width and height are equal when, that is the best, but directly to do multiplication, I believe your math ability of a home after the elementary school 3 grade, Ok, or to share it.

1. Width height want to wait for the position of the x-axis coordinates, this situation usually occurs under a set of buttons, mouse over and click on the background changes. I have also summed up this situation, there are formulas:

X-axis coordinate =-n (starting position + width).

Where the n value starts at 0. That is, the coordinates of all the starting positions are 0,0 start. The following, in turn.

For example, the element you are positioning now is 3rd, assuming we have a width of 30px for the icon. Then his x-axis coordinates are equal. x=-3* (0+30px);

Y-axis coordinate =-n (start position + height)

For example, the icon you want to position now is the 6th position, assuming the height is also 32px, then his y-axis coordinates are

Y=-6 (0+32px) =-192px. Haha, of course there are a lot of tools, that is called Gaga tools, although very good, but I have not used, I have been using my own this set, I myself in practice feel very convenient, to share under.