1.图像精灵的概述
css图像精灵:单个图像中包含了多个图像的集合。
作用:图像精灵可以减少服务器请求的数量,并且能让网页加载的速度变快。
2.代码展示
<!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>图像精灵</title>
<style>
*{
margin: 0;
padding: 0;
}
.one{
width: 60px;
height: 60px;
background: url("./img/picture.jpg");
background-position: -28px -169px;
margin: 100px auto;
border: 1px solid black;
background-size: 240px 129.5px;
}
.two{
width: 60px;
height: 60px;
background: url("./img/picture.jpg");
background-position: -94px -169px;
margin: 100px auto;
border: 1px solid black;
background-size: 254px 129.5px;
}
.three{
width: 60px;
height: 60px;
background: url("./img/picture.jpg");
background-position: -145px -169px;
margin: 100px auto;
border: 1px solid black;
background-size: 240px 129.5px;
}
</style>
</head>
<body>
<div>精灵图</div>
<img src="./img/picture.jpg">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
3.效果图
篇章
上一篇:css3教程5-背景
下一篇:css3教程7-过渡动画