1.为什么需要精灵图
为了有效减少服务器接收和发送请求的次数,提高页面的加载速度
核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一处请求就可以了
2.精灵图的使用
核心:1.精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中
2.这个大图片也称为sprites 精灵图 或者 雪碧图
3.移动背景图片位置,此时可以使用background-position
4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
5.因为在一般情况下都是往上往左移动,所以数值是负值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用精灵图拼出自己的名字</title>
<style>
span {
display: inline-block;
background: url(images/abcd.jpg) no-repeat
}
.x {
width: 104px;
height: 106px;
/* background-color: pink; */
background-position: -255px -563px;
}
.i {
width: 60px;
height: 108px;
/* background-color: pink; */
background-position: -327px -141px;
}
.a {
width: 107px;
height: 128px;
/* background-color: pink; */
background-position: 0px 0px;
}
</style>
</head>
<body>
<span class="x">x</span>
<span class="i">i</span>
<span class="a">a</span>
<span class="o">o</span>
<span class="y">y</span>
<span class="u">u</span>
</body>
</html>
精灵图是有诸多优点,但是缺点也很明显
1.图片文件还是比较大的
2.图片本身放大和缩小会失真
3.一旦图片制作完毕想要更换非常麻烦
此时,有一种技术的出现很好的解决了以上问题,就是字体图片iconfont。
字体图片展示的是图标,本质属于字体。
优点:
轻量级:比图片小
灵活性:本质是文字,可以随意改变颜色、阴影、透明效果、旋转
兼容性
注意:字体图标不能替换精灵图,只是对工作中图标部分的提升和优化
使用:
1.字体图标的下载(http://icomoon.io)(http://www.icnfont.cn/)
2.字体图标的引入(下载包里的fonts文件夹放到页面根目录下,通过css引入页面;html标签内添加小图标)
3.字体图标的追加
总结:
1.如果遇到一些结构和样式比较简单的小图标,就用字体图标
2.如果遇到一些结构和样式复杂一点的小图标,就用精灵图