What are CSS sprite maps?
Image sprites are collections of images contained within a single image.
Web pages with many images can take a long time to load, generating multiple server requests at the same time.
Using image sprites will reduce the number of server requests and save bandwidth.
There are many small icons on the website. If these small icons use separate pictures, they will generate a large number of connection requests to the server, causing traffic jams.
Plug; the sprite map integrates many small icons into one picture, reducing connection requests and increasing page display speed.
Sprite Chart - simple example
Instead of using individual icons, we use the following single image ("iconall.png"):
By using CSS we can display only a certain part of the desired image.
In the example below, the CSS specifies which part of the "iconall.png" image is displayed:
.playBtn{
width: 28px;
height: 28px;
background-image: url(img/iconall.png);
background-position: 0px -140px;
}Notice:
- Sprite images are mainly used for small background images.
- The display of the sprite map mainly uses the background position to realize the background-position
- In general, sprite maps are negative values.
- Coordinates in the web page: the right side of the x-axis is a positive value, the left side is a negative value, and the y-axis is the same as the x-axis.
Sprite map hover effect
Tip: The :hover selector can be used on all elements, not just links.
Our new image ("iconall.png") contains the icon with a mouseover effect:
Realized by code:
.playBtn{
width: 28px;
height: 28px;
background-image: url(img/iconall.png);
background-position: 0px -140px;
}
.playBtn:hover{
background-position: 0px -170px; //通过鼠标经过出现图标
}Let's understand the sprite map through an example!
<!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>
.playBtn{
width: 28px;
height: 28px;
background-image: url(img/iconall.png);
background-position: 0px -140px;
}
.playBtn:hover{
background-position: 0px -170px;
}
.dot{
width: 6px;
height: 6px;
background-color: #CCC;
border-radius: 50%;
}
.dot:hover{
background-color: #F00;
}
/* */
ul,li{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.list li{
width: 230px;
height: 30px;
line-height: 30px;
}
.list li:nth-child(2n+1){
background-color: #CCC;
}
.list li:nth-child(2n){
background-color: #EEE;
}
.number{
float: left;
font-size: 20px;
width: 30px;
text-align: center;
color: #F00;
}
.name{
float: left;
font-size: 13px;
}
.name:hover{
text-decoration: underline;
cursor:pointer;
}
.icon{
float: right;
}
.playIcon{
float: left;
width: 20px;
height: 20px;
background-image: url(img/index.png);
background-position: -265px -266px;
margin: 5px;
display: none;
}
.list li:hover .playIcon{
display: block;
}
.playIcon:hover{
background-position: -265px -286px;
}
.username{
width: 250px;
height: 36px;
outline: none;
border: 1px solid #CCC;
line-height:36px;
padding-left: 50px;
background: url(img/user_login_white.png) no-repeat ;
}
.username:hover{
border: 1px solid #CCC;
}
.username:focus{
background: url(img/user_login_grey.png) no-repeat ;
}
</style>
</head>
<body>
<!--
Sprite
精灵图/ 雪碧图
网站上有很多小图标，这些小图标如果使用单独的图片，会对服务器产生大量的连接请求，造成堵塞
精灵图是把许多小图标整合成一张图片，减少连接请求，增加页面显示速度
精灵图的使用
-->
<div>
<div class="playBtn"></div>
<div class="dot"></div>
</div>
<!-- -->
<div>
<div>
<div>原创榜</div>
</div>
<ul class="list">
<li>
<div class="number">1</div>
<div class="name">Lady Mama</div>
<div class="icon">
<div class="playIcon" title="播放"></div>
</div>
</li>
<li>
<div class="number">2</div>
<div class="name">Lady Gaga</div>
<div class="icon">
<div class="playIcon"></div>
</div>
</li>
<li>
<div class="number">3</div>
<div class="name">Lady Mama</div>
<div class="icon">
<div class="playIcon"></div>
</div>
</li>
<li>
<div class="number">4</div>
<div class="name">Lady Gaga</div>
<div class="icon">
<div class="playIcon"></div>
</div>
</li>
</ul>
</div>
<div>
<input type="text" class="username">
</div>
</body>
</html>The pictures in the example can be downloaded through NetEase Cloud to obtain sprites, or you can ask me for them;
Summarize
By learning the sprite map, in general, the icon is obtained through the coordinates, and the icon is extracted through the positive and negative values of the icon;
css attribute: background-position: the coordinate value of the icon
The coordinate value determines the pixel position of the icon through the pixel size of the image size.