1 css sprites

1.1 CSS Sprites是什么

CSS Sprites是一种网页图片应用处理方式。又被解释为：

CSS精灵
CSS图像拼合
CSS贴图定位
CSS图片精灵
CSS雪碧图
图片合成技术

1.2 为什么需要css sprites

CSS Sprites 并不是一门新的技术了，目前他发展的已经比较成熟，阿里巴巴、百度、谷歌等各公司的网页中到处都可以发现CSS Sprites 的影子。

他是网页里常见的一种图片应用处理方式，他允许你将一个页面里所涉及到的所有的零星的小图片都整合到一张大图中去，这样一来，当访问这个页面时，所加载的图片就不会像以前那样一张一张的慢慢显示出来了。

对于当前的网络所流行的速度来说，不超出200kb的单张图片所需要的加载时间基本是差不多的，节省加载速度的关键不是降低重量，而是减少个数，就因为计算机都是按照byte计算。页面每显示一张图片都会向服务器发送一次请求。所以，图片越多，所请求的次数就越多。

1.3 优势

通过整合图片，减少对服务器的请求数量，减少图片的体积从而减轻服务器的负担，提高网页的加载速度

----------使用前：
在这里插入图片描述

----------使用后：

在这里插入图片描述

1.4 使用原理

大的合并图中包含各个小图
截取大图一部分显示，而这部分就是一个小图标，如下图

在这里插入图片描述

如显示上面 QQ 小图标，则在合并图中X轴向右60像素， Y轴0像素，截取宽高均为48像素；则这个小图标就出来了：

在这里插入图片描述
关键样式：

background-image: url("sprite.png");
background-position: -60px 0px;
width:48px;
height:48px;

1.5 DEMO

在网上找了一张都是图标的图片，如下图：

在这里插入图片描述
现在我们想要拿到左上角第一个图标，第一步怎么做呢？
这时要发挥我们切图仔的能力了

打开photoshop，打开该图片
在这里插入图片描述
使用裁剪工具，或按住 C 键，选中图标

在这里插入图片描述

可以看到
x轴150 y轴80 长宽130 就可以截出该图标了
（没有UI人员那么准确，凑合用这个参数吧）

代码如下：

<div class="demo2"></div>

.demo2 {
    
    
    /* 因为是demo 所以使用本地路径测试 */
    background-image: url('../../assets/xuebiPhoto.jpg');
    background-position: -150px -80px;
    width: 130px;
    height: 130px;
  }

在页面效果：
在这里插入图片描述

2 图片Base64编码

https://www.cnblogs.com/coco1s/p/4375774.html

图片优化: CssSprites与Base64编码

文章目录