html雪碧图素材(webpack雪碧图插件)

web前端什么是雪碧图

雪碧图被运用在众多使用了很多小图标的网站上。

相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。

一、使用雪碧图的优点有以下几点：

将多张图片合并到一张图片中，可以减小图片的总大小。

将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

二、雪碧图的制作与使用方法：

使用图像编辑软件如Photoshop将多张图放到同一个图层并导出。

使用自动化构建工具自动拼接合并后的图片。

引用图片时，图片地址为合并后的图片地址。

html为什么用雪碧图而不用img

回答你问题前先说一下什么是雪碧图？

雪碧图：CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

在来说一下为什么用雪碧图，有什么优点？

减少加载网页图片时对服务器的请求次数

提高页面的加载速度

减少鼠标滑过的一些bug

结论：雪碧图的优点就是在减少请求次数，如果一个网站有一1000个小图标，你用img,你要请求1000次，这个对网络会有堵塞，还有对用户体验也不够好，如果你有了雪碧图，只要加载一次就可以了，雪碧图的不足就是在于后期的维护。

html css关于雪碧图的一个问题~

background-position需要x轴和Y轴两个值，如果只写一个值，第二个值默认center。所以就没有继承一说了，你想hover重置第二个值，第一个值也是要再写一遍的，不能继承。