Detailed explanation of the application of CSS Sprite

CSS Sprite, also known as CSS Sprite, is an image splicing technology. This method is to combine multiple small icons and background images into one picture, and then use CSS background positioning to display the part of the picture that needs to be displayed.

Use scenarios for Sprite images

• Static images do not change with changes in user information.
• Small pictures, small capacity (2~3k).
• The image loading volume is relatively large.

Purpose

Reduce the number of HTTP requests and speed up content display. Because every time a request is made, a connection is established with the server, and establishing a connection requires extra time.

use

Before using the Sprite image, we need to know the position of each icon in the Sprite image.

From the picture above, it is not difficult to see the starting position of each small icon (icon) in the Sprite image. For example, the starting position of the first icon (skirt) in the Sprite image is x: 0, y: 0, the starting position of the second icon (shoes) in the Sprite image is x: 0, y: 50px, and the starting position of the third icon (football) in the Sprite image is x: 0, y: 100px. By analogy, we can derive the starting position of each image relative to the Sprite image.

Taking the above Sprite image as an example (the starting positions of the small images in the actual Sprite image are different from the display image above), a Demo is used to illustrate its usage.

HTML

  <div>
        <ul class="sidebar">
            <li><a href=""><span class="spr-icon icon1"></span>Clothing Underwear</a></li>
            <li><a href=""><span class="spr-icon icon2"></span>Shoes, bags and accessories</a></li>
            <li><a href=""><span class="spr-icon icon3"></span>Sports and Outdoors</a></li>
            <li><a href=""><span class="spr-icon icon4"></span>Jewelry and Watches</a></li>
            <li><a href=""><span class="spr-icon icon5"></span>Mobile digital</a></li>
            <li><a href=""><span class="spr-icon icon6"></span>Home Appliances and Office</a></li>
            <li><a href=""><span class="spr-icon icon7"></span>Skin Care and Makeup</a></li>
            <li><a href=""><span class="spr-icon icon8"></span>Mother and baby products</a></li>
        </ul>
    </div>

CSS

ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}
a {
    color: #333;
    text-decoration: none;
}
.sidebar {
    width: 150px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    padding: 0 10px;
    margin: 50px auto;
}
.sidebar li {
    border-bottom: 1px solid #eee;
    height: 40px;
    line-height: 40px;
    text-align: center;
    }
.sidebar li a {font-size: 18px;}
.sidebar li a:hover {color: #e91e63;}
.sidebar li .spr-icon {
    display: block;
    float: left;
    height: 24px;
    width: 30px;
    background: url(css-sprite.jpg) no-repeat;
    margin: 8px 0px;}
.sidebar li .icon2 { background-position: 0px -24px;}
.sidebar li .icon3 { background-position: 0px -48px;}
.sidebar li .icon4 { background-position: 0px -72px;}
.sidebar li .icon5 {background-position: 0px -96px;}
.sidebar li .icon6 {background-position: 0px -120px;}
.sidebar li .icon7 { background-position: 0px -144px;}
.sidebar li .icon8 { background-position: 0px -168px;}

Why are the background-position property values ​​all negative when using Sprite images?

The above example has explained how to use Sprite images, but beginners may be confused about the negative value of the background-position property in the Sprite image. This question is actually not difficult to answer. If someone is careful, they should have discovered the root cause of using negative numbers a long time ago. Here we use the above Demo as an example to analyze this problem. The span tag above is a 24*30px container. When using a background image, the initial position of the background image will start from the upper left corner of the container and cover the entire container. However, the size of the container limits the size of the background image, and the part beyond the container is hidden. If background-position: 0 0 is set, it means that the background image is displayed at the x-axis = 0 and y-axis = 0 positions relative to the container (span tag) as the starting position of the background image. So if you need to display a second icon in the container, it means that the x-axis direction of the Sprite image needs to be moved left. Moving the Sprite image left means that its value will be set to a negative number, and the same is true for the y-axis direction.

Production

• PS Manual Jigsaw Puzzle
• Automatically generate using Sprite tools (CssGaga or CssSprite.exe)

CssSprite Sprite tool, open source on github, address: https://github.com/iwangx/sprite

Advantages and disadvantages of Sprite

advantage:

1. Speed ​​up web page loading

For each image on the web page, a request is made to the browser to download the image. The browser can accept 10 requests at the same time and can process two requests at a time.

2. Simple maintenance

This tool can directly stitch pictures by selecting them. Of course, you can also move the pictures yourself and layout your sprite sheet. When changing pictures, you only need to change the position of the pictures. Generate code directly, simple and easy to use.

3. CSS Sprites can reduce the bytes of images. I have compared the bytes of 3 images combined into 1 image many times and it is always smaller than the sum of the bytes of these 3 images.

4. It solves the trouble of web designers in naming pictures. They only need to name a collection of pictures, without naming each small element, thus improving the efficiency of web page production.

5. It is convenient to change the style. You only need to change the color or style of one or a few pictures, and the style of the entire web page can be changed. It is more convenient to maintain.

shortcoming:

• When merging pictures, you need to merge multiple pictures into one picture in an orderly and reasonable manner, and leave enough space to prevent unnecessary background from appearing in the section. These are not so bad, but the most painful thing is that on the adaptive page under wide screen and high resolution screen, if your picture is not wide enough, the background will easily be broken;
• As for maintainability, this is generally a double-edged sword. Some people may like it, while others may not, because every time you change the image, you have to delete or add content to the image, which seems a bit cumbersome. And calculating the position of pictures (especially pictures of thousands of pixels) is also a very unpleasant thing. Of course, these can be overcome under the slogan of performance.
• Since the position of the image needs to be fixed to a certain absolute value, this loses the flexibility such as center.

CSS Sprites can generally only be used in boxes of fixed size, so that the parts that should not be seen can be covered. This means that CSS Sprites are not suitable in some situations where non-unidirectional tiling backgrounds are required and web page scaling is required.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.