When it comes to css sprite technology see when the first contact was detected at the site Baidu Webmaster Tools, said this technology can reduce the number of requests website picture, was not very understanding, after a lot of understanding, to understand the principles involved , so in this to share with you.
CSS Sprites in domestic many people called css wizard, is a web application picture approach. It allows you to a page related to all sporadic images contain a large map to go, so that, when accessing the page, the picture will not be loaded as a piece of land slowly appear as before a. Required for the current popular network speed, not more than 200KB of single picture of the basic load time is about the same, so no scruples this problem. The key acceleration, not to reduce the weight, but to reduce the number. Traditional drawing attention to fine cut, the smaller the better the picture size, weight the smaller the better, in fact, does not matter the size specifications, unified computer are by byte. Each client display picture will send a request to the server. So, the more pictures request more times, resulting in greater likelihood of delays.
CSS Sprites in fact, the number of pages in the background image integrated into an image file, and then use the CSS "background-image", "background- repeat", "background-position" a combination of background positioning, background-position can be used digital can accurately locate the position of the background image.
Below I will explain in detail his use of skills, including children's shoes you do not understand now have a clear understanding of the new, although there are such tools, but the thing is to clear his principles, it will be tricky to do very rapid completion of positioning, here I share plus cases.
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
First with you to point out, due to the need to locate the background are merged in a map, it is across the board, consistent with either the X-axis coordinate or Y coordinate is the same, and will have the following I want to talk about two kinds the type.
1. Lateral positioning coordinates
transverse coordinate positioning means is fixed to the Y-axis coordinate, it is characterized by the height of each icon is the same, the background is changed by changing the position of the x coordinate. Simply measuring the width of each icon can know the coordinates of the x-axis. If you do not know the law, the following I will explain it to you, I do take the following two cases for something.
Renderings:
The actual background:
So specifically to explain how to locate here is to change the X coordinates to locate.
Therefore, since the height is the same coordinate axis Y is 0 or top
where each icon I do background with a span, the following specific analysis Code:
The following is a 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;}
They are common background image that a background: background-image: url (../ images / shareIcon.jpg);
background of each element are not allowed to repeat: that is: background-repeat: no-repeat ;
read here you have found a pattern, the coordinates of each element is equal to the coordinate value plus the width of the front element. I.e. transverse coordinate value is equal to formula elements. Neighboring coordinate value plus the width of the element.
pinterestLogo facebookLogo value equal coordinate value width 20px + facebookLogo 20px; ah is not very simple, if you know the width of an element can be, because of the transverse coordinates necessary to give a fixed width, so this step is not wasting time measured width . We want a close look at the law of the source code coordinate values.
Whether the lateral positioning of the longitudinal positioning coordinates, their start positions background-position: 0 0; and when the height of the lateral positioning is fixed, the only change every X-coordinate value is realized.
The logo is an icon such as facebook starting position, so its value is 0, 0 coordinate, on the realization of its location.
The logo is a pinterest then below it, a negative value is measured from the width of the facebook. Since the width is facebook 21px; pinterest the logo so that the coordinates of background-position: -20px 0; so twitterLogo following is a pinterstLogo below, it is a coordinate value plus the width pinterstlogo pinterstLogo, it is obtained twitterLogo the coordinates of the location. Is - (20px + 42px) = - 62px; i.e. twitterLogo coordinates of .twitterLogo {background-position: -62px 0 ; width: 30px;} Here you have read found a pattern, the coordinates of each neighboring elements is equal to coordinate value plus the width of the element preceding the element in front of it. I.e., the transverse coordinate values of elements equal to the company. Neighbors coordinate value plus its width. Well following about the second option.
The actual background image:
{margin UL: 0; padding: 0; a float: left; width: 32px;}
UL {Li a 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} / * equal to the Y-axis coordinate from i.e., the height of the start position + 32 0 :-() * /
.fr {background-position: 0 -52px; height: 32px;} / * equal to Y-axis coordinate of the front element together with the height of the front element, i.e. :-( 20 is + 32) * /
.h {background-position: 0 -84px; height: 32px;} / * equal to Y-axis coordinate of the front element together with the height of the front element 52 is + 32 * i.e. :-() * /
.T {background-position: 0 -116px; height: 32px;} / * equal to Y-axis coordinate of the front element together with the height of the front element, i.e. :-( 84 + 32) * /
3. The width and height are equal when it is best, however, to do direct multiplication, trust your math skills one after the third grade, Ok, or to share in that.
X axis of the case 1. The height of the wanted width and the like coordinates, which usually appear in a set of buttons, change the background and clicks the mouse over time. I this case, summed up with the formula:. X-axis coordinate = -n (starting position + width) where the value of n from zero. That is, the coordinates of all the starting position is 0,0 beginning. And so below.
For example, you now want to target elements of the first three, assuming we have here an icon of a width of 30px. So his X-axis coordinate equals. x = -3 * (0 + 30px); Y-axis coordinate = -n (starting position + height)
For example, you now want to locate the icon for the sixth position, assuming that there is also a highly 32px; then his Y-axis coordinate is Y = -6 (0 + 32px) = - 192px.
This, we should also understand CSS Sprite is What a technique, and how to use the.
Finally, send it benefits everyone, CSS sprites Generator
CSS sprites Generator (English called css sprite generator), is a free CSS support multiple languages split picture generator, currently supports 18 languages (including Simplified Chinese). The online tool is very easy to use, you just need to upload CSS you need to put together a picture archive, duplicate images set approach, adjust the original size, Sprite Output parameter settings, output options to generate CSS CSS Sprite and CSS files.
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
Learning the front focusing share, I hope we can take a good article to share with each other, learn together and progress together!
