sprite sprite
Introduction
CSS sprite technology (also known as CSS Sprites, CSS Sprite), simply speaking, is to use a small icon intercepted from a large image with various small icons.
Just because you only need to load a large picture, doing so can effectively reduce the number of times the server receives and requests, and improves the loading speed of the web page.
principle
(1) Use it in tags such as span, i, div, etc., and set the sprite map as its background
(2) background-postion:x y;Selectively intercept a part of the sprite map through attributes, x represents the distance moved along the x-axis, and y represents The distance to move along the y-axis, usually these two values are taken as negative numbers, and the sprite image will be intercepted from top to bottom.
Advantages and disadvantages
(1) Advantages:
1. Reduce http requests, speed up the loading speed of web pages, and improve user experience
2. Reduce the size of pictures and reduce the number of bytes
3. Solve the trouble of naming pictures for designers
4. Easy to change styles
(2) Disadvantages:
1. Measurements are required during development, which is cumbersome.
2. Troublesome during maintenance . 3. The size and position of sprites
cannot be changed arbitrarily.
example
Realize a navigation bar through a sprite map
Here is a sprite map:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 500px;
height: 100px;
display: flex;
background-color: white;
justify-content: space-around;
margin: 0 auto;
}
span {
display: flex;
flex-direction: column;
margin-left: 8px;
}
a {
margin-top: 8px;
width: 48px;
height: 48px;
}
span:nth-child(1) a {
background-image: url(./sprite.png);
background-position: 0 0;
}
span:nth-child(2) a {
background-image: url(./sprite.png);
background-position: 0 -56px;
}
span:nth-child(3) a {
background-image: url(./sprite.png);
background-position: 0 -110px;
}
span:nth-child(4) a {
background-image: url(./sprite.png);
background-position: 0 -164px;
}
span:nth-child(5) a {
background-image: url(./sprite.png);
background-position: 0 -215px;
}
</style>
</head>
<body>
<div>
<span>
<a href="#"></a>
<span style="margin-left: 1px">景点.玩乐</span>
</span>
<span>
<a href="#"></a>
<span>周边游</span>
</span>
<span>
<a href="#"></a>
<span>美食林</span>
</span>
<span>
<a href="#"></a>
<span>一日游</span>
</span>
<span>
<a href="#"></a>
<span style="margin-left: 1px">当地攻略</span>
</span>
</div>
</body>
</html>
result:
