html雪碧图怎么用(雪碧图制作)
html为什么用雪碧图而不用img
回答你问题前先说一下什么是雪碧图？
雪碧图：CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分
在来说一下为什么用雪碧图，有什么优点？
提高页面的加载速度
减少鼠标滑过的一些bug
结论：雪碧图的优点就是在减少请求次数，如果一个网站有一1000个小图标，你用img,你要请求1000次，这个对网络会有堵塞，还有对用户体验也不够好，如果你有了雪碧图，只要加载一次就可以了，雪碧图的不足就是在于后期的维护。
在rem单位下使用雪碧图实现自适应
雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。
使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。
显示雪碧图的条件：
1）需要一个设置好宽和高的容器
2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。
为了合并图片请求我们经常会用到sprite技术。在rem布局方案下，使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。
在处理sprite图片时，我们只能给background-size取具体值。那么这个值取多少呢？其实只要写我们切出来的图片的实际尺寸就行。
比如我们的元素为5050px，sprite图片为200px 50px，那css应该如下：
需要引用的雪碧图如下
web前端什么是雪碧图
雪碧图被运用在众多使用了很多小图标的网站上。
相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。
一、使用雪碧图的优点有以下几点：
将多张图片合并到一张图片中，可以减小图片的总大小。
将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。
二、雪碧图的制作与使用方法：
使用图像编辑软件如Photoshop将多张图放到同一个图层并导出。
使用自动化构建工具自动拼接合并后的图片。
引用图片时，图片地址为合并后的图片地址。