精灵图(spites)的使用
使用精灵图核心:
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2.这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position。
4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
5.因为一般情况下就是往上往左移动，所以数值是负值
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
使用精灵图核心总结：
1.精灵图主要针对小的背景图片使用。
2.主要借助于背景位置来实现—backround-position
3.一般情况下精灵图都是负值。(千万注意网页中的坐标:x轴右边走是正值，左边走是负值，y轴同理)
精灵图神器
参考：
https://www.freesion.com/article/1661424673/
https://www.jianshu.com/p/eb3e505238d1
神器网址：
http://www.spritecow.com
步骤
1，点击open image
把我们的精灵图照片放进去，点击那两个按钮
2*和%
2，选中图标，复制图片下面输出的代码
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sprite {
background: url('image/sprites.png') no-repeat 0 -350px;
width: 236px;
height: 107px;
}
</style>
</head>
<body>
<div class="sprite"></div>
</body>
</html>
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
