css图片整合

图片整合 sprite

优势

image-20200715101100881

image-20200715101207160

整合的方法

ps

  • 新建图层（名字为英文、给定宽高、选择像素、背景内容设置透明、创建）
  • ctrl+c复制小图 ctrl+v 粘贴 选择工具移动位置
  • 裁剪工具，剪掉下方多余的位置 enter
  • 导出（PNG）

精灵图中 背景定位，向左移动，向上移动只有负值和0，没有正值

图片格式

  • PNG8兼容IE6

image-20200715142349348

image-20200715142841950

image-20200715143006445

image-20200715143050413

posted @ 2020-08-15 21:33  若梦plus  阅读(198)  评论(0)    收藏  举报