使用精灵图:
- 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中
- 这个大图片也称为sprites 精灵图 或者 雪碧图
- 移动背景图片位置,此时可以使用background-position
- 移动的距离就是这个目标图片的x 和 y坐标(注意网页中的坐标有所不同)
- 因为一般情况下都是往上往左移动,所以数值是负值
- 使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。
语法:
选择器 { background-position:x轴值 y轴值; }
可以简写为:
background: url(img/img.jpg) no-repeat x轴值 y轴值;
总结:
- 精灵图主要针对于小的背景图片使用
- 主要借助于背景位置来实现(background-position)
- 一般情况下精灵图都是负值(注意网页中的坐标:x轴右边走是正值,左边走是负值。y轴同理。)
版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!
转载请注明:转载于37.2度云笔记