sprite精灵图转二倍图

迈不过友情╰ 2023-06-24 10:27 27阅读 0赞

# 精灵图 #

精灵图又名雪碧图，产生原因是网页首次加载的时候需要加载很多图片，为了解决服务器拥堵的问题。精灵图可以缓解加载时间过长，从而提升用户体验。精灵图就是把很多小的图片合并到一张大的图片中，在首次加载的时候只需要加载出一张大的图片即可。  
  例如携程网页（[携程][Link 1]），我们可以查看图片元素，如下图：  
  ![在这里插入图片描述][20191222205120644.png]  
  这就是精灵图，将要分开显示的5张logo显示在一张图片中。

# 二倍图 #

举个例子，以iPhone 8来说，它的设备分辨率是`750 * 1357（pt）`，但是在网页开发中，显示的大小是`375 * 677（px）`，所以物理像素是开发尺寸的2倍，假设界面上需要显示一张`50 * 50（px）`的图片，实际上的物理像素应该是`100 * 100（pt）`，这就是二倍图，三倍图也是如此。

# 精灵图转二倍图 #

1.下载安装Fireworks软件（[官网][Link 2]）  
  2.打开图片，把图片缩小为原来的2分之一  
  ![在这里插入图片描述][2019122221372679.png]  
  3.选中自己需要的图片，获取位置  
  ![在这里插入图片描述][20191222213050258.png]  
  4.添加代码

width: 40px;
      height: 40px;
      background: url('../assets/pictures/sprite.png') no-repeat -9px -7px;
      background-size: 40px auto;

`background-size`是宽高缩小后的值，`-9px -7px`是选中的位置。

[Link 1]: https://m.ctrip.com/html5/
[20191222205120644.png]: https://img-blog.csdnimg.cn/20191222205120644.png
[Link 2]: https://www.onlinedown.net/soft/1227226.htm
[2019122221372679.png]: https://img-blog.csdnimg.cn/2019122221372679.png
[20191222213050258.png]: https://img-blog.csdnimg.cn/20191222213050258.png