CSS Sprites(CSS sprite)

1. What are CSS Sprites?

　General css sprite is a web image application processing method. It allows you to include all the scattered pictures involved in a page into one big picture, so that when the page is accessed, the loaded pictures will not be displayed one by one as before. . Then use the combination of CSS "background-image", "background-repeat" and "background-position" to position the background.

2. Advantages and disadvantages of using CSS Sprites

Advantages:

1. Reduce the http requests of web pages, thereby greatly improving the performance of the page.

2. Reduce the bytes of pictures. The bytes of merging multiple pictures into one picture are always less than the sum of bytes of multiple pictures.

3. Solve the problem of naming pictures.

Disadvantages:

1. When merging pictures, multiple pictures should be merged into one picture in an orderly and reasonable manner, and enough space should be left to prevent unnecessary backgrounds from appearing in the section;

2. On adaptive pages under widescreen and high-resolution screens, if the picture is not wide enough, it is easy for the background to break;

3.. When developing CSS Sprites, it is necessary to measure and calculate the precise position of each background unit. It is recommended to use the CSS Sprites style generation tool.

4. During CSS Sprites maintenance, if the page background is slightly changed, this merged image will usually need to be changed.

Summary: Generally, CSS Sprites combined layout is used for local small box layout and is not suitable for large backgrounds and large layout backgrounds. For example, small partial layout, small icon background, small navigation background and other CSS layouts. In short, many times we have to weigh the pros and cons before deciding whether to use CSS Sprites.

Three. Give me a chestnut

A picture of 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;
    }