Css sprites introduction, css sprites

Css sprites introduction, css sprites

1. Introduction to CSS Sprites

It is often translated as "CSS image splicing" or "CSS texture positioning ". CSS Sprites is not a new technology. At present, it has developed more mature in Web development. CSS Sprites are not a golden rule, but in many cases, it has some advantages, the most important thing is that it can reduce the server load and increase the webpage loading speed.

CSS Sprites allows you to include all the sporadic images involved in a page into a large image. In this way, when you access this page, the loaded image will not be shown as slowly as before. The loading time required for a single image of no more than KB is almost the same for the current popular speed of the network, so you don't have to worry about this issue.

The key to acceleration is not to reduce the quality, but to reduce the number. Traditional cut-down images are fine-grained. The smaller the image type, the better the weight, and the better. In fact, the size of the cut-down images does not matter, and the computers are all computed in bytes. Each image displayed on the client sends a request to the server. Therefore, the more images are requested, the more likely the latency will be. Ii. CSS Sprites Working PrincipleCSS Sprites is actually to integrate some background images in a webpage into an image file. When you need images, use the CSS attribute background-image to combine background-repeat, background-position. By adjusting the value of background-position, the background image will appear in front of you with different appearances. In fact, the overall face of the image has not changed. Because of the changes in the image position, you only need to see it. It's like the date on the watch. Today you see it as 21, and tomorrow you see it as 22, because its position jumps up one grid. So you probably know that CSS Sprites can only be used in fixed-size boxes to block what you should not see.

 

Iii. Advantages of CSS Sprites

　　

1. The use of CSS Sprites can effectively reduce http requests on webpages, greatly improving the page performance. This is also the biggest advantage of CSS Sprites and the main reason for its wide spread and application; 2. CSS Sprites can reduce the size of the image. The size of the three images merged into one image is always smaller than the total size of the three images. 3. It solves the problem of web designers in naming pictures. You only need to name the pictures in a collection, and you do not need to name every small element, this improves the webpage production efficiency. 4. Easy to change the style. You only need to modify the color or style of the image on one or more images. The style of the entire webpage can be changed. It is easier to maintain.

 

 

Iv. disadvantages of CSS Sprites

1. When merging images, You need to combine multiple images into one image in an orderly and reasonable manner, and leave enough space to prevent unnecessary background in the Section, the most painful thing is the Adaptive Page under a wide screen or high-resolution screen. If your picture is not wide enough, it is easy to break the background;

2. maintainability is a double-edged sword. Some may like it, but others do not like it, because each image change requires you to delete or add content to the image, which is a little tedious. It is also quite uncomfortable to calculate the position of an image (especially a picture with thousands of pixels. Of course, these can be overcome under the performance slogan.

3. Because the position of the image must be fixed to an absolute value, flexibility such as center is lost.

4. As we mentioned earlier, CSS Sprites can be used only when the box size is limited. Otherwise, image interference may occur. That is to say, CSS Sprites is not suitable for non-unidirectional tiled backgrounds and webpage scaling. The YUI solution is to increase the distance between images so as to maintain a limited scaling.

 

 

5. CSS Sprites image Cutting

1. Add CSS Sprites images sequentially from top to bottom and left to right. However, the background-position is usually located in the form of digital combinations, which can reduce unnecessary maintenance troubles.
2. It is not recommended that the CSS Sprites image be separated to a certain extent, because the file size increases and the file size increases.

3. When the CSS Sprites image is closer or the same color is combined, the number of colors can be reduced because the size of the image file with a few colors is relatively small.
4. There is a large gap in CSS Sprites images with the same size. To some extent, the size of CSS Sprites images will increase.

5. In CSS Sprites images with the same size, vertically arranged images are larger than horizontally arranged files.
6. In CSS Sprites images, horizontally arranged images are larger than vertically arranged files.

7. Image equivalence merge: When CSS Sprites images are applied, the same image equivalence is properly merged to save space and reduce volume.
8. Separated images that do not need to be merged: if the current user determines that only one status or level is displayed, it is unnecessary to merge images of other levels or statuses.
9. Gold cutting position: the rightmost or leftmost icon in the CSS Sprites image is the most appropriate active position in front of the text, so it will not be affected by other CSSSprites images, you do not need to reserve a certain row width.

Find the implementation method of CSS Sprites Technology

Analysis of CSS Sprites Technology

It was originally circulated only between CSS players as a production method. later it came out with 14 Rules for Faster-Loading Web Sites, which were circulated among technicians, the first rule "Make Fewer HTTP Requests" mentioned CSS Sprites. As a result, this little goblin got angry and even appeared online generation tools, which were unstoppable. CSS Sprites has been mentioned in many blogs in China recently. The most famous example is the animations below www. google. co. kr. In the latest YUI release, CSS Sprites is also used. Almost all CSS decorative images are arranged by a 40x2000 chart. Facebook, a social networking site, recently used a 22 × 1150 image to assume all the icons. At a time, CSS Sprites were everywhere.

Principle

As we know, since the CSS revolution, HTML tends to be semantic-oriented. In general, instead of writing decorative content in the tag, the rendering task is handed over to CSS. GUI is colorful, and various beautiful images are indispensable. The Production Method in the new era is that HTML is filled with various hooks and then handled by CSS. When images are needed, the CSS attribute background-image is used to combine background-repeat and background-position, in the future, if the browser supports content, another implementation method will be added ). Our main character is, you must have guessed it, that is, background-position. By adjusting the value of background-position, the background image will appear in front of you with different appearances. In fact, the overall face of the image has not changed. Because of the changes in the image position, you only need to see it. It's like the date on the watch. Today you see it as 21, and tomorrow you see it as 22, because its position jumps up one grid. So you probably know that CSS Sprites can only be used in fixed-size boxes to block what you should not see.

We use yuisprite.png as an example. If we have such a piece of code, max represents maximization, min represents minimization, and we need to add corresponding beautiful pictures to them (so that our website can attract people, you can only sell money to sunbathe in Florida: D ):

<Div class = "max"> maximize </div>
<Div class = "min"> minimized </div>

Both classes use the same image:

. Min, max {
Width: 16px;
Height: 16px;
Background-image: url (2.16.yahoo.com/..te.png );
Background-repeat: no-repeat; // we do not want it to be tiled
Text-indent:-999em; // a method for hiding text
}

The effect is as follows:

Maximize the minimum... the remaining full text>

CSS sprites Problems

You can control the location of the background image.
Use two divs and one DIV to set one DIV, and add the background respectively to adjust the width and height to control the image position ......

Below is the code
You can try it. Pay attention to the image address:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
</Head>
<Style>
. Content {
Background: url(sprites.jpg) no-repeat right-30px;
Width: 200px;
Height: 30px;

}
. Content div {
Background: url(sprites.jpg) no-repeat left top;
Height: 30px;
Width: pixel PX;
}
-->
</Style>

<Body>
<Div class = "content"> <div> </div>

</Body>
</Html>