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

2025-04-26 10:31:12
推荐回答(1个)
回答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