网站知识

设计师一定要懂的图片css技术css-sprite

来源:实搜网络   2013-11-21

 

最开始的时候,图片都是一张一张单独存在,需要哪张,就发送http请求来调用,随着时间的推移,background-position的应用,又兴起了css-sprite这种技术,一时之间大家都在盲目跟风,认为不这样做就不够专业,或者技术不够好等。

css-sprite是把所有用于网页背景的图片,拼合在一张大图之内,然后通过背景图定位的方法,来控制显示自己需要的那张图。但是不是所有的图片都适用css-sprite,例如网页内的图片,或者是需要重复平铺的图片。并且,这种大图一旦合并以后,如果以后再要修改其中的某一个图片,就要牵一发而动全身,如果只是简单颜色改变,或许还稍微容易一些,但是如果大图内的某些元素的尺寸变化了,就需要重新进行合并了,并且可能会导致其他图片的位置发生变化,从而演变成调整一个图片,还要同时调整大图内的其余图片,并且要调整css的background-position的数值。

并不是说css-sprite技术不好,只是什么时候需要用,什么时候不需要用,不能够一概而论的跟风,看人家网易用了,你也用!

css-sprite适用的条件:
1.网站的开发已经完毕,包括功能,模块,交互,程序,都已经反复测试,就差发布;
2.网站已经趋于完美,不会再三天两头的改动,不能说今天上线了,明天觉得按钮太小了,要调整,后天觉得按钮太大了要调整;
3.你的网站流量很大,需要尽量减少http的请求次数;

css-sprite也并不是像看起来那么简单的,只是单一的把图片拼合在大图上那么简单,首先你应该考虑,那些图片是需要每个页面都要引入的,这些图片可以拼合到一张大图中,而那些只有个别页面才需要调用的图片,则不适合也加在大图里面,否则你的http请求次数的确是小了,但是某些图片其实在某些页面是不需要用到的,但是你放在一张大图里面,用户还是需要去加载,造成了网速的负担。

另外,对于一些小公司,做一个产品没有一个合理的构思甚至框架,想到哪里就让人去做,想一步做一步,做一步改一步,改完一步,再改一步,改来改去没有最终敲定的,这个时候如果一开始就使用css-sprite拼合图片,无疑给自己造成了巨大的困扰,增加了许多的工作量。所以最好是,等到产品已经完全敲定,测试没有问题,可以上线发布了,再去拼合图片。 

实搜网络为您提供网络推广网络营销网站建设SEO优化微信开发网站托管等服务,服务热线:0311-66697360