优点:1.减少了网页的http的请求,提高了网页性能。原理很简单,没有运用csssprite这种技术时,网页可能要加载十二个icons,但当运用了这种技术之后,十二个icons全部放在一个background-image内了。当我们加载网页的时候就只需要加载一个background-image就可以了。
2.” CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。“——源自<博客园>的“沫鱼的前端世界”。
缺点:1.首先一点是维护麻烦,当我们需要的十二个icons需要换其中几个或者增加或删除几个的时候,可能需要重新排版。当修改的icon与之前的不一致时则更几乎是要重新排版的。所以在这一点上,csssprite并不容易维护。不过一般人们运用这种技术的前提是设计的css盒子能够保证在相当长的一段时间内不会改变的。
2.开发时,在自适应属性下,csssprite可能会因为图片大小等属性的各种原因而导致图片出现断裂情况使得设计的页面效果十分难看。
3.同样是开发时,在设计页面的时候,运用csssprite技术需要用Photoshop去精准的定位到图片的长度,操作不难但是比较繁琐。