精灵图(sprites)

使用精灵图:

  1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中
  2. 这个大图片也称为sprites 精灵图 或者 雪碧图
  3. 移动背景图片位置,此时可以使用background-position
  4. 移动的距离就是这个目标图片的x 和 y坐标(注意网页中的坐标有所不同)
  5. 因为一般情况下都是往上往左移动,所以数值是负值
  6. 使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。

语法:

选择器 { background-position:x轴值 y轴值; }

可以简写为:

background: url(img/img.jpg) no-repeat x轴值 y轴值;

总结:

  1. 精灵图主要针对于小的背景图片使用
  2. 主要借助于背景位置来实现(background-position)
  3. 一般情况下精灵图都是负值(注意网页中的坐标:x轴右边走是正值,左边走是负值。y轴同理。)

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

邮箱地址不会被公开。

微信