Main content: preface, introduction, origin, principle, advantages and disadvantages, application, summary, etc.
【Foreword】
Developers may often encounter sprite maps, so what exactly is a sprite map? I'm bored at the Lantern Festival today, let's summarize the realization principle and application of Sprite Map
【Introduction】
Official explanation :
CSS Sprite is CSS Sprite (sprite), which is called css sprite by many people in China. It is a kind of web page image application processing method. It allows you to include all the sporadic pictures involved in a page into a large picture, so that when visiting the page, the loaded pictures will not be displayed slowly one by one as before . For the current popular speed of the Internet, the required loading time of a single image not higher than 200KB is basically the same, so there is no need to worry about this problem.
Simple understanding :
The so-called sprite image is a CSS image merging technology. The method is to merge small icons and background images into one image, and then use the background positioning of CSS to display the part of the image that needs to be displayed; simply put, it is a whole image. It can also be understood as a picture interception display (movement of coordinates)
[Origin]
The key to speeding up is not to reduce the quality, but to reduce the number. The traditional cutting plan pays attention to meticulousness. The smaller the picture size, the better, and the smaller the weight, the better. In fact, the size does not matter, and the computer is uniformly calculated by byte. The client sends a request to the server every time an image is displayed. Therefore, the more pictures, the more requests, and the greater the possibility of delay.
【principle】
Simple understanding: The principle is to integrate some images used on your website into a single image, thereby reducing the number of HTTP requests to your website. The image is rendered using the CSS background and background-position properties, which means your tags are more complex, the image is defined in CSS, not the <img> tag
【advantage】
①Reduce the number of requests to the server when loading web page images;
Most background images and small icons can be combined for easy use in any location, so that requests from different locations only need to call one image, thereby reducing the number of requests to the server, reducing server pressure, and improving page loading speed and saving server traffic. .
②Improve the loading speed of the page
One of the benefits of sprite technology is the image load time (in the case of many sprites, the load time of a single image). The size of a GIF image assembled from the desired images will be significantly smaller than the size of all the images before they are assembled. A single GIF only has one color table associated with it, and each GIF that is split separately has its own color table, which increases the overall size. Therefore, a single JPEG or PNG sprite is very likely to be smaller in size than the total size of the image obtained by splitting the image into multiple pieces.
【shortcoming】
①When merging pictures, you should combine multiple pictures into one picture in an orderly and reasonable manner, and leave enough space to prevent unnecessary backgrounds from appearing in the plate; these are good, but the most painful thing is to use widescreen , the adaptive page under the high-resolution screen, if your picture is not wide enough, it is easy to have background breakage;
②CSS Sprites are more troublesome to maintain. If the background of the page is slightly changed, generally this merged image should be changed. It is best not to change the place that does not need to be changed, so as to avoid changing more CSS. If it cannot be placed in the original place , and you can only (best) add pictures down, so that the bytes of the picture will increase, and you will need to change the css
【application】
The background-position attribute needs to be used. The background-position attribute is used very frequently. In order to reduce the number of http requests, a large number of websites will combine a large number of pictures into a Sprite for use. The use of the sprite map is to determine the position of the image by controlling the value of the background-position attribute. It has to be said that its role is very important. Of course, in addition to the scene using the sprite map, this attribute is often used in some other scenes. , this time to summarize its usage.
(1) Let's first understand the background-position attribute:
%: Use percentage to set the property value, which is the value obtained by multiplying the length and width of the image by the length and width of its own container to determine the starting position of the image.
(container's own width/height - image's own width/height) x percentage
(2) Summary:
① If the value of the background-position attribute is a numerical value, it refers to the distance relative to the value of the container itself as the starting position; if it is a percentage or a direction, it refers to the distance relative to the container itself (the width/height of the container itself - the width of the image itself). /height) x percentage value as the starting position;
②If the background-position attribute value is not set, then the default starting position is
background-position：0% 0%；
③The calculation method of direction value and percentage is the same, they can be converted to each other, left: 0%, right: 100%, center: 50%;
④ If only one background-position property value is set, then the other defaults to center
【Case】
(1) Icon location
After understanding the usage of the background-position property, it is relatively simple to learn how to use the sprite map. Before using the sprite map, we need to know the location of each icon in the sprite map
From the above picture, it is not difficult to see that each small icon (icon) in the sprite image is at the starting position of the entire 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, the starting position of the third icon (football) in the sprite image is x: 0, y: 100px, and so on to get Get the starting position of each image relative to the Sprite image
Take the above sprite image as an example (the starting position of each small image in the actual sprite image is different from the above display image), use a Demo to illustrate its usage
<style type="text/css">
.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>
<div class="box">
<span class="icon1"></span>
<span class="icon2"></span>
<span class="icon3"></span>
<span class="icon4"></span>
</div>
(2) Why is the value of the background-position property negative when using the Sprite image?
The above example has explained how to use the sprite image, but beginners may be confused about the negative value of the background-position attribute in the sprite image. This question is actually not difficult to answer. If you are careful, you should have discovered the root of the use of negative numbers very early. Here we use the above Demo as an example to analyze this problem. The above span tag is a container with a length and width of 25px. When using a background image, the initial position of the background image will cover the entire container from the upper left corner of the container. However, the size of the container limits the size of the background image, which exceeds the container. Parts are hidden. If you set background-position: 0 0, it means that the position of the background image relative to the container (span label) x-axis = 0; y-axis = 0 is used as the starting position of the background image to display the image. So if you need to display the second icon in the container, it means that the x-axis direction of the sprite image needs to be moved to the left, and moving the sprite image to the left means that its value will be set to a negative number, and the same is true for the y-axis direction.
【Summarize】
CSS Sprites are very worth learning and applying, especially if the page has a bunch of icons. In short, many times we have to weigh the pros and cons before deciding whether to apply CSS Sprites
.