一个网站,由许多元素构成,如:文本、图像、链接、表单、表格等,除了文本,图像当属重中之重了!在早先的
网站设计中,图片都是独立分开的;到了2004年,Dave Shea(css禅意花园作者)提出了使用css控制组合图片的方案,将许
多小的图片合成于一张画布里,再通过background-position进行定位,来控制图片的显示位置和方式。
一时间,该方案得到人们的推崇,并将其称为css Sprite技术,中文意思大概就是“css贴图定位”或“css图像拼合”。
那么,为什么要用该技术呢?它的优势在哪里?存在哪些缺点呢?
首先,从网站的优化方面考虑。将许多图片拼合成一张图片,在加载时就不是对之前的每张图片进行加载了,而
是
只要对拼合成的图片加载一次就够了,这就大大减少了http请求的次数,降低了服务器的负载;
其次,从css的维护方面考虑。图片多了,就得为每张图片命名,命名并不是一件很轻松的事情,有时候可以把人
搞得焦头烂额,而把众多的图片合成起来,只要为组合图片一次命名,省却许多的时间;另外,在样式表里书写代码时,可
以将样式进行分离,只进行一次图片应用,而其他的都只是定位的问题了,提升了代码的精简。
它的缺点同样要从css的维护方面来说,因为css sprite大多使用于较固定的像素定位中,而一用到定位,布局上
就是固定住了,降低了网页的弹性。
所以,在用该技术时,应该在可维护性和降低负载之间权衡利弊,选择适合项目的方式。
更多信息请查看IT技术专栏