什么是CSS 精灵图?
图像精灵是单个图像中包含的图像集合。
包含许多图像的网页可能需要很长时间才能加载,同时会生成多个服务器请求。
使用图像精灵将减少服务器请求的数量并节约带宽。
网站上有很多小图标,这些小图标如果使用单独的图片,会对服务器产生大量的连接请求,造成堵
塞;精灵图是把许多小图标整合成一张图片,减少连接请求,增加页面显示速度。
精灵图 - 简单的例子
我们使用以下单幅图像("iconall.png")而不是使用单独的图标:
通过使用 CSS,我们可以仅显示所需图像的某个部分。
在下面的例子中,CSS 指定了显示 "iconall.png" 图像的哪部分:
.playBtn{
width: 28px;
height: 28px;
background-image: url(img/iconall.png);
background-position: 0px -140px;
}
注意:
- 精灵图主要针对小的背景图片使用。
- 精灵图的显示主要借助于背景位置来实现background-position
- 一般情况下精灵图都是负值。
- 网页中的坐标:x轴右边是正值,左边是负值,y轴也是和x轴一样的原理。
精灵图悬停效果
提示::hover 选择器可用于所有元素,而不仅限于链接。
我们的新图像("iconall.png")包含鼠标悬停效果的图标:
通过代码实现:
.playBtn{
width: 28px;
height: 28px;
background-image: url(img/iconall.png);
background-position: 0px -140px;
}
.playBtn:hover{
background-position: 0px -170px; //通过鼠标经过出现图标
}
下面我们通过实例来了解精灵图吧!
<!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>
实例中的图片可以自行通过网易云去下载获取精灵图,也可以找我要;
总结
通过学习精灵图,总的来说就是通过坐标来获取图标,通过图标的正负值来提取图标;
css属性:background-position:图标的坐标值
坐标值通过图片大小像素大小来确定图标的像素位置。