CSS Sprites Web page Background image positioning Technology Brief

Many times we open some site background image will find a lot of icons set a complete picture. This kind of Web page uses CSS Sprite, by combining multiple icons in the same picture, can reduce the number of requests to the server, speed up the page loading speed.

CSS sprites 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 quality, 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.

Background image positioning method:

We know that the code for writing the background in CSS is:

1. . class{ background:URL(./images/bg. PNG) no-repeat left top #ccc;}

If you use a CSS sprite to position the background image, you need to modify the left and top two in the above code. In fact, the left and top two words correspond to 0px, which means that the above code can also be written as:

1. . class{ background:URL(./images/bg. PNG) no-repeat 0px 0px #ccc;}

The effect of its realization is that the background picture sits on it. Below, kurly according to his own experience and understanding, to everyone to draw a map, as follows. The background image of CSS is the origin of the upper left corner, so that we can understand the previous code is the upper left corner of the alignment effect. Also, be careful to observe the positive direction of the diagram axis, and understand this is a good thing to do. The kurly in the figure shows the coordinates of the ( -50px, -50px), and if we want to use a gray square with a length of 50px in the white picture as a background image of a 50px-wide Div, then we just need to write the CSS:

2. . box{
4. Height:50px;
6. Width:50px;
8. Background:URL(./images/bg. PNG) no-repeat -50px -50px;
10. }

Also, if our div layer is a square of 200 pixels long, we want this gray square as the background and center, and what about the CSS? Very simple, as long as you understand the direction of the axis, according to the above example, we can easily know that the coordinate value should be modified to positive 50px (note: The black area is a background image outside the area). CSS as follows

1. .{
2. height:< Span class= "lit" >200px;
3. width:200px
4. background:url (./images/bg. Png no-repeat  50px 50px

Believe, after reading the above example, you already know how to use CSS Sprite to locate your background image!

CSS Sprites Web page Background image positioning Technology Brief