Sprite image (Sprite image)
1. What is a sprite map?
The sprite map, also known as the sprite map (sprite), the basic principle is to classify the various pictures used in the page, place them neatly on a picture with a transparent background, and realize the introduction of pictures through CSS background technology, so that Reduce the number of times the server sends and receives requests, and improve page loading speed.
Example image:
We integrate some background images in the web page into a large image file, and then use background-position to precisely locate the position of the background image.
2. Benefits of Sprite Map
- Using image sprites will reduce the number of server requests and save bandwidth.
- To a certain extent, the loading speed of the page is accelerated, and the pressure on the server is also relieved to a certain extent.
- Using sprites can effectively reduce the number of times the server receives and sends requests, thereby improving page loading
3. Sprite map use cases
We use the following single image (“navsprites.gif”) instead of multiple separate images for simple navigation
By using CSS, we can display only a certain part of the desired image.
The first step, set up the container
First, we need to set three hyperlink tags a, and then turn the a tag into an inline block tag, so that the width and height of the a tag can be set.
Note: The width and height are set according to the size of the small picture in the sprite map
We can measure the size of the small image in the sprite map in many ways.
For example: ps tool, screenshot software, etc.
The width I measured through the measurement tool is 88px, But since my computer has a 200% zoom (when measuring, pay attention to whether your computer is zoomed),< /font> So the real width is 44px, and the height measured in the same step is also 44px, so the width and height of the a tag can be set to 44px.
Execution code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sprite Map</title>
<style>
a {<!-- -->
/* Turn a tag into an inline block tag */
display: inline-block;
width: 44px;
height: 44px;
/* Easy to observe. Add a border */
border: 1px solid black;
}
</style>
</head>
<body>
<a class="previous" href=""></a>
<a class="home" href=""></a>
<a class="next" href=""></a>
</body>
</html>
Renderings:
The second step, insert the sprite
We use the background-image attribute to insert the sprite image into the a tag as a background image
Execution code:
a {<!-- -->
/* Turn a tag into an inline block tag */
display: inline-block;
width: 44px;
height: 44px;
/* Easy to observe. Add a border */
border: 1px solid black;
/* Insert the sprite */
background-image: url('./image/navsprites_hover.gif');
}
Renderings:
The house images appear in the three boxes because Background images are inserted from the upper left corner by default, and the width and height we set are exactly the size of a house image.
The third step, positioning (key points)
After inserting the sprite image, we can use the background-position attribute to locate the small image we need.
First of all, when positioning, we only need to find the coordinate points of the target picture. Then how to find the coordinate points of the target image becomes a key issue.
We can take the horizontal direction of the sprite map as the x-axis, the vertical direction as the y-axis, and the upper left corner as the origin (0,0)
If we want to find the second small picture, then we only need to find the upper left corner of the second small picture The x-axis distance and y-axis distance from the origin (0,0) are sufficient.
From the figure, we can see that the upper left corner of the second picture (I set it as p1) p1 is 44px away from the origin x-axis, and 0px away from the origin y-axis.
Then the coordinate point of p1 is (44,0), but it should be noted that there is a 1px border between the picture and the picture. If we want to find p1, we need to move p1 to the left
45px, so the final positioning result is background-position: -45px 0;
Be sure to pay attention to the coordinates in the webpage: the x-axis goes to the right is a positive value, and the left side is a negative value, and the y-axis is the same.
Because the origin is not moving, we want to display the second image, p1 needs to move 45px to the left, therefore, the sprite map positioning value is generally negative value.
Knowing how to position the second picture, the rest of the pictures can easily find the position of the upper left corner of the picture according to this method.
In this way we can find the coordinate points of the upper left corner of the rest of the pictures:
Execution code:
.previous {<!-- -->
/* The coordinates of the upper left corner of 'previous' are (90,0) */
background-position: -90px 0;
}
.home {<!-- -->
/* The coordinates of the upper left corner of 'house' are (0,0) */
background-position: 0 0;
}
.next {<!-- -->
/* The coordinates of the upper left corner of 'next' are (45,0) */
background-position: -45px 0;
}
Renderings:
At this point we can also add a hover effect to the a tag
Execution code:
.previous:hover {<!-- -->
background-position: -90px -45px;
}
.home:hover {<!-- -->
background-position: 0-45px;
}
.next:hover {<!-- -->
background-position: -45px -45px;
}
Renderings:
Final code:
Sprite Map
final effect:
When looking for the position of the sprite map, sometimes there will be a slight difference. At this time, we can press the F12 key in the browser to open the developer mode, so that We can fine-tune in the browser, and after the adjustment is perfect, copy the code into the project.
4. Summary:
- Sprite images are mainly used for small background images.
- The display of the sprite map is mainly realized by means of the background position–background-position
- Generally, sprite images are negative values.