CSS精灵技术/css sprites/css雪碧
为什么需要精灵技术?
有效的减少服务器接收和发送请求的次数,提高页面的加载速度
精灵技术怎么实现?
css精灵图是将网页中的一些背景图像整合到一张大图中(称为精灵图),各个网页元素通常只需要精灵图中的不同位置的某个小图
精灵技术详细实现?
利用background: url(images/index.png) no-repeat 0 -107px;定位到大图里的某个小图
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css精灵图</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 23px;
height: 23px;
background: url(images/index.png) no-repeat 0 -107px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
lvan学习笔记-文章内容仅个人观点
2019.12.10