Said
CSS Sprite TechnologyThe first contact or in Baidu Webmaster tools to see when the site detection, said this technology can reduce the number of site pictures requested, at that time is not very understanding, and then learned a bit, understand the principle, so here to share with you.
CSS SpritesMany people in the country called CSS Wizard, is a kind of Web page image application processing mode. It allows you to include all the bits and pieces of a page that are involved in a larger image, so that when you visit the page, the loaded picture will not show up as slowly as before. For the current network speed, not higher than 200KB of the single picture of the required loading time is almost the same, so no scruples about this issue. The key to acceleration is not to lower the weight, but to reduce the number. Traditional cut drawing exquisite, picture specifications smaller the better, the weight of the smaller the better, in fact, the size of the computer is not the same as in byte calculation. Every picture displayed by the client sends a request to the server. As a result, the more requests a picture has, the greater the likelihood of a delay.
CSS SpritesIn fact, the Web page in a number of background images into a picture file, and then use the CSS "Background-image", "Background-repeat", "background-position" combination of background positioning, Background-position can be used to pinpoint the position of the background image with numbers.
Below I will explain in detail his use skill, bag you do not understand the children's shoes will have a clear new understanding, although there is such a tool, but still need to clear his principles, skills to do will also be very quick to complete the positioning, the following I share add a case.
First of all to explain that, because the need to locate the background are merged in a picture, so all is a knife, or x axis coordinates or y axis coordinate, also have the following I want to tell the 2 types of.
1. Positioning coordinates horizontally
Horizontal positioning coordinates mean y axis coordinates fixed, it is characterized by the height of each icon is consistent, by changing the position of the x coordinates to change the background. The coordinates of the x axis can be known only by measuring the width of each icon. If you don't know the rule, I'll explain it to you below, take the 2 cases I've done.
Effect Chart:
Actual background Image:
So specifically how to locate the solution, here is to change the x coordinates to locate.
Because the height is all the same, the coordinates on the Y axis are 0 or top.
Here each icon I used a span to do the background, the following specific analysis of the code:
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 pictures are all public this one background: Background-image:url (... /images/shareicon.jpg);
The background of each element is not allowed to be duplicated: namely: background-repeat:no-repeat;
Read here you have found a rule that the coordinates of each element equals the coordinates of the preceding element plus the width. That is, the horizontal coordinate value formula for the element equals. The coordinate value of the adjacent element plus the width.
The value of the Pinterestlogo is equal to the facebooklogo of the coordinate value of the 20px+facebooklogo width 20px; it's very simple, as long as you know the width of the elements, because the horizontal coordinates must be given a fixed width, So it's not a waste of time to measure the width of this step. I want to look carefully at the rules of the coordinates in the source code.
Whether they are positioned horizontally or vertically, their starting position is background-position:0. 0. While the height of the horizontal positioning is fixed, so each time you need to change the value of the x-coordinate is achieved.
For example, Facebook's logo is the starting position of the icon, so its coordinate value is 0, 0, it achieved its positioning.
Then the Pinterest logo is the one below it, which is the negative value from the Facebook width. Because the width of Facebook is 21px, so Pinterest's logo coordinates are background-position:-20px 0; Below and so on Twitterlogo is the pinterstlogo below one, then is uses the Pinterstlogo coordinate value to add the Pinterstlogo width, then obtains the Twitterlogo coordinates the position. That is-(20px+42px) =-62px; the Twitterlogo coordinates are. twitterlogo{background-position:-62px 0;width:30px; Read here you have found a rule that the coordinates of each adjacent element equals the coordinate value of the preceding element plus the width of the preceding element. The horizontal coordinate value of the element the company equals. The coordinate value of the adjacent element plus its width. Okay, here's the second scenario.
Actual background picture:
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;} . p{background-position:0 -32px;height:20px}/*y Axis coordinates equal to the starting position of the height that is:-(0+32) * *
. fr{background-position:0 -52px;height:32px;} /* equals the y-coordinate of the preceding element plus the height of the front 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 front 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 front element, i.e.:-(84+32) * *
3. Width and height are equal when, it is best, directly do multiplication, I believe that your math ability a home after the primary school 3 grade, OK, or to share under it.
1. Width height to wait for the case of inferior bit x axis coordinates, this kind of situation usually appears under a group of buttons, the mouse slides over and clicks the background change. I also summed up the situation, there are formulas: X-axis coordinate =-n (starting position + width). where n values start at 0. That is, all the starting position coordinates are 0,0 start. The following is an analogy.
For example, the element you want to locate now is the 3rd one, assuming that we have a 30px width of the icon here. Then his x-axis coordinates are equal to. x=-3* (0+30px); Coordinate =-n of Y axis (starting position + height)
For example, you now have to position the icon for the 6th position, assuming that the height is also 32px, then his y-axis coordinates is y=-6 (0+32px) =-192px.
In this, we should also understand what CSS Sprite is a technology, and how to use it.
Finally send a little welfare to everyone, CSS picture flattener builder
CSS Picture Flattener Builder (in English, named CSS Sprite Generator), is a free CSS image flattening builder for multiple languages, currently supports 18 languages (including Simplified Chinese). The online tool is very easy to use, you only need to upload the CSS you need to flatten the image compression package, set up a duplicate image processing method, adjust the original size, flatten the picture output settings parameters, CSS Output options can be generated CSS mosaic pictures and CSS files.
CSS Sprite Generator is the first choice for the front-end designer's efficient online tools.
CSS Sprite Generator official website: spritegen.website-performance.org
The front end of learning to share, I hope everyone will be good articles to share with each other, learn together, and progress together!
