web前端什么是雪碧图

html-css024

web前端什么是雪碧图,第1张

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

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

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

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

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

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

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

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

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

一般情况下雪碧图是用在背景里面的(background),然后通过background-position来调整位置的,那么颜色可以是backround-color来控制,简写就比如:

background:#f00 url('xbt.png') -100px -100px no-repeat

//这儿假设雪碧图是xbt.png,路径也是正确的,那么你就可以根绝上面的格式来引用雪碧图;这句话的意思是 红色背景(#f00)、引入图片(url('xbt.png'))、向上 向左 各偏移-100px( -100px -100px )、图片不复制(no-repeat)