web前端什么是雪碧图

发布网友发布时间：2022-04-22 01:28

共4个回答

热心网友时间：2022-04-06 12:36

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

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

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

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

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

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

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

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

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

热心网友时间：2022-04-06 13:54

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。

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

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

将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显

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

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

引用图片时，图片地址为合并后的图片地址，通过background-position调整背景图的位置，并通过容器的宽高共同作用，来选出所需的图片

注意：

在HTTP2中，已经不需要考虑减少请求数，故雪碧图在HTTP2中优化性能的意义已经不大

热心网友时间：2022-04-06 15:29

background:url(img/controls.png) no-repeat 0px -229px ;

示例代码中controls.png 上有一些小的图片 0px -229px 就是定位到所需图片啦，意思是横向不动，纵向向下229个像素，这里的(0px -229px)实际上是 background-position。

下面就是我用到的一个图片啦

热心网友时间：2022-04-06 17:20

CSS雪碧即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
从百度百科上面找到的，不知道能不能帮助你哈。追问那具体怎么定位来显示需要的图片，坐标怎么弄