精灵图利用background-image，background-repeat，background-position的组合进行背景定位，background-position属性可以用数字能精确的定位出背景图片在布局盒子对象位置。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css精灵图，其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。
这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
精灵图产生背景：
立即学习“前端免费学习笔记（深入）”；
1、网页上的每张图像都需要向服务器发送一次请求才能展现给用户。
2、网页上的图像过多时，服务器就会频繁地接受和发送请求，大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（CSS Sprites）
精灵图的定义：
1、很多图片融合在一张图上，通过背景定位的方式将图标显示在每个盒子中。
2、背景定位的方式主要通过控制x和y轴的值。
利用“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。
精灵图使用技巧：
1、一般情况：直接一个盒子，里面的背景图片是精灵图，使用时注意x轴和y轴。
2、特殊情况：盒子中有一个小图标，此时，小图标外套一个标签（i标签或者span），给小图标设置定位后（自动转成行内块）定义宽高，这个宽高就是精灵图中的小图的宽高，然后注意x轴和y轴的值。
示例：
精灵图
HTML代码
css代码
ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;} ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden} ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px; overflow:hidden;background-image: url(ico.png);background-repeat:no-repeat;} ul.Sprites li a{ padding-left:5px} ul.Sprites li span.a1{ background-position: -62px -32px} ul.Sprites li span.a2{ background-position: -86px -32px} ul.Sprites li span.a3{ background-position: -110px -32px} ul.Sprites li span.a4{ background-position: -133px -32px} ul.Sprites li span.a5{ background-position: -158px -32px}
效果图：
css sprites关键代码与解释
ul.Sprites li span.a1{ background-position: -62px -32px} ul.Sprites li span.a2{ background-position: -86px -32px} ul.Sprites li span.a3{ background-position: -110px -32px} ul.Sprites li span.a4{ background-position: -133px -32px} ul.Sprites li span.a5{ background-position: -158px -32px}
首先对ul.Sprites li span引入背景
ul.Sprites li span{ background-image: url(ico.png);background-repeat:no-repeat;} 给span设置css背景图片。
再分别对不同span class设置对于图标背景定位具体值
ul.Sprites li span.a1{ background-position: -62px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”62px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a2{ background-position: -86px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”86px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a3{ background-position: -110px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”110px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a4{ background-position: -133px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”133px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a5{ background-position: -158px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”158px，向上“拖动”32px开始显示此背景图标
关键：
背景background-position有两个数值，前一个代表靠左距离值（可为正可为负），第二个数值代表靠上距离值（可为正可为负）
背景background-position有两个数值可以为正可以为负，当为正数时，代表背景图片作为对象盒子背景图片时靠左和考上多少距离多少开始显示背景图片；当为负数时代表背景图片作为盒子对象背景图片，将背景图片拖动超出盒子对象左边多远，拖动超出盒子对象上边多远开始显示此背景图片。
（学习视频分享：css视频教程）
以上就是css精灵图怎么定位的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1620700.html
微信扫一扫 
支付宝扫一扫 
