css sprits技术的优势是什么?实现它的核心代码是什么?

html-css039

css sprits技术的优势是什么?实现它的核心代码是什么?,第1张

你是指CSS Sprites吧?

其实它本身不是什么代码，也没核心代码什么的

只是一个理论

最常见到CSS Sprites用在一些小图示的图片上

比如一个网站有80个小图示

他们就把这80个小图示放到同一张图片中，然后帮他们做背景定位

然后设定一个CSS

代码参考：取自百度百科

.bg_sprite{background-image:url(/整图地址)background-repeat:no-repeat}

引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..

#ico1 {width:容器宽度height:容器高度background-position:X坐标 Y坐标}

#ico2 {width:容器宽度height:容器高度background-position:X坐标 Y坐标}

#ico3 {width:容器宽度height:容器高度background-position:X坐标 Y坐标}

.nav {width:容器宽度height:容器高度background-position:X坐标 Y坐标}

参考一下吧

优势....

优势是他们相信加载一整张大的图片，比起加载80个张图示速度来得更快

事实上会快点，但效果没想像中那么夸张

如果是大型网站，人手足够当然用啊

但如果大大影响你开发速度，我就建议可以在有时间优化的时候再去做了

你可以参考一下百科：

http://baike.baidu.com/view/2173476.htm

一般情况下，是按照单个图标的尺寸来计算的。比如说，单个图标为 50*50 ，css sprits 图标的大小为 50*200，那就是代码这张图片由4张单个图标组成。且为竖向排列。那么取得不同图标，应该按照 Y轴方向的偏移去定位。依次是 Y=0，Y=50，Y=100，Y=150。当然这里将的是比较规则的图片。

如果一张图片上是横向、纵向都有，且大小不同的排列在一起。那么应该怎么获取，答案是相同的。定位的方式不变，不同的图标应该按照各自的大小进行尺寸的限定，再配合定位就能获取了。

希望对您的理解有所帮助。