How to use css sprite

How to use css sprite: first integrate some background images in the web page into an image file; then use the combination of CSS "background-image", "background-repeat" and "background-position" Just perform background positioning.

The operating environment of this tutorial: windows7 system, css3 version, thinkpad t480 computer.

Recommendation: "css Video Tutorial"

CSS Sprites are called css sprites by many people in China. They are 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. . For the current popular network speed, the loading time required for a single image not exceeding 200KB is basically the same, so there is no need to worry about this issue.

The key to accelerating CSS Sprites technology is not to reduce the weight, but to reduce the number. Traditional cutting of pictures pays attention to precision. The smaller the picture size, the better, and the smaller the weight, the better. In fact, the size does not matter, computers are all calculated in bytes. Every time the client displays an image, it sends a request to the server. Therefore, the more images there are, the more requests there are, and the greater the possibility of delays.

css sprite usage

CSS Sprites actually integrates some background images in the web page into an image file, and then uses CSS "background-image", " The combination of "background-repeat" and "background-position" performs background positioning. Background-position can accurately position the background image using numbers.

Example:

HTML

<div class="box">
    <span class="icon1"></span>
    <span class="icon2"></span>
    <span class="icon3"></span>
    <span class="icon4"></span>
</div>

CSS

<style>
       .box {
         width: 600px;
         height:300px;
         border: 3px solid #ccc;
         background-color: #8064A2;
        }
        span {
         display: inline-block;
         width: 25px;
         height: 25px;
         border: 3px solid #ccc;
         background-image: url(css/img/sidebar.png);
         background-repeat: no-repeat;
         margin: 5px;
        }
       .icon1 {
         background-position: 0 0;
        }
       .icon2 {
         background-position: -40px 0;
        }
       .icon3 {
         background-position: 0 -25px;
        }
       .icon4 {
         background-position: -40px -25px;
        }
</style>

Rendering:

CSS Sprites Advantages:

1. Reduce the bytes of the image

2. Reduce the http requests of the web page, thus greatly improving the performance of the page

3. Reduce the difficulty of naming The problem.

4. It is more convenient to maintain.

Disadvantages of CSS Sprites:

1. 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 backgrounds appear in the section; these are okay, but the most painful thing is the adaptive page under widescreen and high-resolution screens. If your picture is not wide enough, it is easy for the background to break;

2 , CSS Sprites are more troublesome to maintain. If there is a slight change in the page background, you usually need to change the merged image. It is best not to touch the areas that do not need to be changed, so as to avoid changing more css. If you put it in the original place If it is not lower, you can only (preferably) add pictures further down, which will increase the bytes of the picture and also change the css.

The above is the detailed content of How to use css sprite. For more information, please follow other related articles on the PHP Chinese website!