《
简单了解CSS Sprites（图片合并）技术》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023452R013.htm
当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px;十分轻易。这刚开端的时候是可行的，然而问题是，当你在宽度上或高度上扩大相干sprite图片的时候，本来设置的位置可能是错的,简单6步 打造B2C电子商务网站，由于那个图片已经不再Sprite图片的底部或右部了。使用确实的地位来防止这个问题。
当用户往U盘中拷200张图片，会等良久。但是假如弄成一个文件，再拷贝就会快良多.
就像你在本文顶部的实例图片看到的那样,第三代思维指导下的网站建设具体操作，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢？ 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，甚至于其它图片不会意外出现。
例子：
将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS挪动背景图片的位置的时候，基础上不可能有其它的小图片意外的呈现在它的邻近。使用Sprite的时候经常碰到的一个问题是图片会涌现在它不该出现的位置。
我直到创立一个比较大的sprite的时候才理解到这一点。比方，如果咱们盼望一个图片出当初一个元素的左侧：
不要等到你完成切片之后才开始sprite.
定位时避免使用bottom或right等
给每个图片足够的空间
Tag：图片合并 Sprites CSS 图片合并 Sprites CSS ,
第9页：复习css;
不必担忧Sprite图片的像素大小
本文的目标并不是讲CSS Sprite如何让一个网站更快，而是说一些应用CSS Sprite的时候的一些最佳实际,第8页：第5日的css练习。
--> [
网站建设之]简略懂得CSS Sprites（图片合并）技巧
如果你边切图边写CSS，然后等你实现了全部网站之后再来拼接这些图片到一个Sprite中，你就不得不完整重写你的CSS，你也必需要破费许多的时间来用PS拼接大批的图片——这是件令人倍感纠结的事件。但是如果边切图边整合，就会比较容易些。
而后依据详细图标在大图上的位置，给背景定位。background-position:-8px -95px;
首先将小图片整合到一张大的图片上
减少网站加载时光的最有效的方法之一就是减少网站的HTTP恳求次数。实现这一目的的一个有效的办法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。
如果你的网站经由良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就须要你个无比大的sprite来适当的放置这些图片。这是很不错的。sprite里的空缺不会占用太多的文件大小。addons.mozilla.org上使用的Sprite图片有1,000px×2,000 px那么大，但是图片的大小仅仅16.7kb
例子中的每个条目都有个带数字的图片作为背景图片。如果你细心看了上面的那张图片，你能够看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会心外出现。
CSS Sprites 的目的就是通过整合图片，减少对服务器的要求数目，从而加快页面加载速度。
把图片放到它要显示的地方的绝对的处所这个小技能貌似比拟难懂得,第8页：复习CSS - 第四天。
简单先容一下 CSS Sprites 的长处：
下面是一张样图：
实现方式：
(责任编辑：网站建设)
简单了解CSS Sprites（图片合并）技术相关文章