一、什么是css sprites css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的,因为图片多的话,会增加 ...
CSS Sprites的最初的想法是可以通过 lt img gt 标签和JAVASCRIPT中的onmouseover和onmouseout的事件使用CSS来切换一张大图片中的坐标位置显示到DIV上来实现图片的变化。 主要的功能是通过背景图片的定位来显示图片的局部,当很多小图片放在一张图片上然后加载,就可以减少图片加载时服务器的开销 如亚马逊网站的各类图标: 只需一张图片即可完成加载所有的按钮和 ...
2012-12-20 17:24 0 4116 推荐指数:
一、什么是css sprites css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的,因为图片多的话,会增加 ...
优点 1.利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因; 2.CSS Sprites能减少图片的字节,曾经比较过多次3张图片 ...
前言: 近期研究着前端性能的优化方面的知识,并以博客记之。之前有相同系列的文章(前端性能优化--图片懒加载(lazyload image)),这次继续是关于图片的处理,css sprites 和 base64 格式图片,这两种处理都是通过减少了http的请求来达到前端性能优化的效果,请求 ...
切换窗口 ...
css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片、背景图是否重复、背景图定位),显示图片,减轻服务器对图片的请求数量 优点: 1、减少网页的HTTP请求,提高页面性能 2、图片命名上的困扰 3、更换风格方便 缺点: 1、必须限定容器大小,符合 ...
CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张 ...
...
一、把小图放在一张大图中,先排版好。上几张图看看,就比如这个: 谷歌: 淘宝: 土豆右下角悬浮框: 1、把用到的小图都放到了一张大图里,其中的小图之间的排版是有点规律的,比如说淘宝 ...