1. What is a sprite map?
When a user visits a website, the browser will send a series of requests to the server. For example, each image on the web page needs to go through a request before it can finally be displayed to the user. However, a web page often contains a large number of image resources (such as pictures displayed on the page, background images of the web page, and some decorative images, etc.), which will cause the browser to frequently request the server, greatly reducing the loading speed of the web page. . In order to effectively reduce the number of requests to the server and improve the page loading speed, CSS Sprites technology has emerged, also known as sprite technology .
The so-called sprite map is a picture stitching technology. It combines multiple small pictures into one large picture, and displays a small icon in the sprite map through the background-position attribute in CSS.
Picture: Sprite map in Taobao
The sprite chart is as follows:
2. Advantages of sprite charts
1. The use of sprite technology can alleviate the problem of long loading times that affects the user experience.
2. It reduces the page loading speed to a certain extent and relieves the pressure on the server to a certain extent.
3. Using sprites can effectively reduce the number of times the server receives and sends requests, thereby improving page loading performance.
3. Basic usage of sprite charts
1. Tools: PS, HBuilder
2. Material: Any sprite map will do
Step 1: Open ps and import the sprite map
The letters spelled out here are YY
Step 2: Measure the size and coordinates of the letters
(1) Use the rectangular marquee tool to measure the size of the letters and set the size of the div to the size of the letters.
(2) Open the information in the window menu bar, and you can query the information of the letter width, height, x-axis and y-axis.
(3) Move the mouse cursor to the upper left corner of the letter, and measure the x and y values through the information panel on the right.
(4) Write the style in css and locate the position of the letters through background-position.
renderings
Code:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>Use of sprites</title><style>/*Common styles*/div{background:url(D:/dotcpp/img /picture.jpg);/*Import sprite resources*/float:left;/*Set floating left*/}.box1{/*The height and width of the box must be consistent with the size of the sprite*/width:149px;height :140px;background-position:296px143px;/*Corresponds to the x and y axes respectively*//*When positioning in PS, place the cursor in the upper left corner of the rectangular selection to get the position*/}.box2{/* The height and width of the box should be consistent with the size of the sprite */width:149px;height:140px;background-position:296px143px;/*correspond to the x and y axes respectively*//*When positioning in ps, place the cursor In the upper left corner of the rectangular selection, you can get the position */}</style></head><body><divclass=box1></div><divclass=box2></div></body></html>