HTML中的“雪碧图“详解

HTML中的雪碧图详解

1.雪碧图的支持格式：

每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片。

2.雪碧图的优点：

(1)可以减小建立连接的消耗,加快运行。
(2)多张图片合并到一张图片中，可以减小图片的总大小。
(3)将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。

3.雪碧图的制作和使用方法：

使用图像编辑软件如Photoshop将多张图放到同一个图层并导出。
使用自动化构建工具自动拼接合并后的图片。
引用图片时，图片地址为合并后的图片地址。

4.雪碧图效果图显示：

代码显示：

1.html模块：

2.css模块：