CSS Sprite(雪碧图)也叫CSS精灵图,在营销型网站之制作中都会运用到,是一种图像拼合技术,方法是将多个小图标和背景图像合并到一张图片上,然后通过元素的background-image、background-positon属性完成图片的定位来显示需要显示的图片部分。作用是减少Http请求数量,加速内容显示。因为每请求一次,就会和服务器建立一次链接,而建立链接是需要额外的服务器资源,下面超溜网络就来讲解下雪碧图的优缺点:
1、加快网页加载速度
网页上面每一张图片,都要向浏览器请求下载图片,而浏览器接受的同时请求数是10个,一次能处理的请求数目是两个。
2、减少图片大小
用3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、后期维护简单
该工具可以直接通过选择图片进行图片的拼接,当然你也可以自己挪动里面的图片,自己去布局你的雪碧图,更换图片的时候也只要更改一下图片的位置就可以了。
4、更换风格方便
只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
5、图片命名困扰
雪碧图只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
以上就是超溜网络对雪碧图的理解,当然雪碧图也有其缺点,比如只能使用到固定大小的盒子里,这样才能够遮挡住不应该看到的部分、失去了诸如center之类的灵活性等。