CSS Sprites (CSS Wizard)

A. What is CSS Sprites?

General CSS Wizard, is a Web page image application processing method. 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. Then use the CSS "Background-image", "Background-repeat", "background-position" the combination of background positioning.

Two. Pros and cons of using CSS Sprites

Advantages:

1. Greatly improve the performance of the page by reducing the HTTP request of the Web page very well.

2. Reduce the number of bytes in the picture, the bytes of multiple images merged into 1 pictures are always smaller than the sum of the bytes of multiple pictures.

3. Solve the problem of image naming.

Disadvantages:

1. When the picture is merged, it is necessary to combine multiple pictures into one picture in order, and to keep enough space to prevent unnecessary background in the plate;

2. In widescreen, high-resolution screen under the adaptive page, if the picture is not wide enough, it is easy to appear background break;

3..CSS Sprites When developing, it is recommended to use CSS Sprites style generation tools to measure the exact location of each background unit.

4.CSS sprites in maintenance, if the page background has a little change, it is generally necessary to change the merged picture.

Summary: The general CSS sprites flattening layout is used for local small box layouts that are not suitable for large background large layout backgrounds. such as small local layout small icon background, small navigation background, such as CSS layout. In short, many times we have to weigh the pros and cons, and then decide whether to apply CSS Sprites.

Three. Give me a chestnut.

A picture of a emoji

Final effect:

HTML code:

    <ul>        <li class= "Emoji1" ></li>        <li class= "Emoji2" ></li>        <li class= " Emoji3 "></li>        <li class=" Emoji4 "></li>    </ul>

CSS code:

*{        margin:0px;    }    ul,li{        list-style:none;    }    li{        width:50px;        height:50px;        Overflow:hidden;        Background:url (' emoji.jpg ') -0px-0px no-repeat;    }     . emoji1{        background-position: -0px-0px;    }    . emoji2{        background-position: -0px-50px;    }    . emoji3{        background-position: -0px-100px;    }    . emoji4{        background-position: -0px-150px;    }

　　

CSS Sprites (CSS Wizard)