CSS Sprite

　　CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会 像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需 顾忌这个问题。

　　按照yahoo的rules for high performance web sites的原则，应当较少Client与Server端间 的HTTP Request次数。通过CSS Sprites方法将多张图片组装成单独的一张图片，可以有效减少HTTP请求 的次数。
　　当整幅图片载入完成后，你就可以使用CSS方法通过设置背景位置的方式完成所需图片的准确调用。
　　加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。

 

这样说你可能还是不太明白。换言之，就是把许多背景图片整合成一张背景图片，然后通过限制要使用背景图片的元素的宽高，再通过background-repeat , background-position 来对图片进行定位，这样做的好处就是减少网页加载时的HTTP请求，因为你每使用一张背景图片，加载网页时就会发出一个HTTP请求。

平常你可能不太注意，其实这项CSS技术在很多大型网站都有应用，比如Google韩国首页那个著名的动画工具条，你可以查看一下背景图片，其实所有的图标都在一张背景图上面。再比如土豆网，你点击导航栏，选择查看背景图片，可以看到，整个网页的大多数地方的背景图片都是集成在一张图片里的。

你还可以在AOL、Yahoo之类的知名网站找到类似的CSS sprites应用，个人网页设计好像用的还比较少。CSS sprites也具有一定的局限性，比如每次都需要添加图片到整张背景图片中，而且需要精准的定位测量。

下面是一些英文的关于CSS Sprites的使用技巧，如果你要看中文，也可以自己去搜索一些。

• CSS Sprites: Image Slicing’s Kiss of Death
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance

因为IE6对PNG格式的图片透明支持性欠缺，要实现IE6中对PNG透明的支持可以用js实现，查看demo ，点击下载 。

机械密封专业供应商,机械密封 找张家港市艾克曼密封有限公司