首页 > 代码库 > 雪碧图技术

雪碧图技术

一、boder在某些情况下会触发BFC环境,一般用轮廓(outline)而不用边框
二、雪碧图技术(精灵图)
是一种CSS图像合并技术:(循环);是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
优点:1)减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标,方便在任何位置使用,这样不同位置的请求只需要调用一个图片,从而减少对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量。
2)提高页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时,单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表,而单独分割的每一张 GIF 都有自己的一个色表,这就增加了总体的大小。因此,单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
3)减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片,所以,如果使用多张图片,鼠标滑过会出现闪白的现象。使用CSS雪碧,由于一张图片即可,所以不会出现这种现象。

不足:1)CSS雪碧的最大问题是内存使用
2)拼图维护比较麻烦
3)使CSS的编写变得困难
4)CSS 雪碧调用的图片不能被打印

三、解决兼容性
1)reset重置技术;normalize技术
2)加前缀
3)<!doctype>解析模式
4)CSS中的Hack技术
5)条件注释
6)倒入包

四、浏览器兼容性
1)opacity(filter)
2)PNG背景
3)圆角(倒包,图片)
4)BFC
5)双倍margin兼容问题
6)在IE下有3PXz差距
7)font-size;

五、条件注释一定要写完整

雪碧图技术