Css拼图.(舒克)
- 资源共享 技巧 ... (shuke.2013-03-09 02:26)
- Css拼图.(舒克)
说到Css Sprites，现在还没有一个很官方的译名，网上有很多叫法，为了好记些，这里就叫Css拼图或Css雪碧（比较潮的说）。Css Sprites是一个比较早的技术了，最初应用在导航条上比较多，比如要实现默认情况下和鼠标悬停在菜单上显示不同背景的效果，可以在a:link和 a:hover定义不同的背景图片，为了使这种悬停效果显示更流畅，图片加载更快，将相应的图片整合在一张，这便是Css Sprites的一种应用。
现在讲Css Sprites的优势，最重要应该是提升Web页面的性能，减轻服务器压力。这样的好处不仅使浏览者打开页面的速度更快、增加页面PV，更实实在在的是给服务商减少了成本，所以这一技术的广泛应用也跟各公司的领导认可有很大的关系。
Css Sprites提升页面性能基本可以从三个方面体现：
1、减少http请求数，这一点应该可以得到大家的认可；
2、减少整个图片的大小，查看每张图片的属性，我们都可以看到有大小和占用空间两个不同的值，如果将多张图片合并到一张大图中，那大图的大小和占用空间是远远小于所有小图加起来的大小的，具体实例可查看崔凯的文章《CSS Sprites 图片整合技术》有详细介绍；
3、减少css文件的体积，这一点我会在接下来详细介绍。
Css Sprites虽然有以上的优点，但也不是彻底完美的，其劣势就是使项目维护成本的增加，这主要表现在三个方面：
1、图片的拼合、摆放需要更多的时间。之前的单张小图不会存在这个问题，但现在如果要将多张小图拼合在一起，就需要考虑各图摆放的位置，每个小图的应用时候会对其周围的其他图片造成影响，这些都得花时间来考虑；
2、读取图片位置的计算。在写css时，每应用到大图中的某一小图时，就得量取一次该图的纵横位置，而且必须要绝对精确，这是很费时的；
3、后期图片的增加和删除。在项目后期维护中，有些页面可能会经常改动，那大图中相应的图片就得进行相应的调整，有时候可能还会遇到迁一发而动全身的麻烦。
毋庸置疑，Css Sprites的应用优势还是很大的，为了性能，其他的也只能想办法解决。接下来就谈下我一般对Css Sprites的操作方法。
1、整合图片的分类。有些朋友可能会将所有能整合的图片都放在同一张图片上，这样的方法或许更适合一些不是很大的页面，如果要完成的页面有很多，有很多的频道，那我会选择将整合的图片进行分类。
第一类是背景平铺类。如果是高度固定的水平平铺，我会将所有的图片都放在一个宽为10px、高度调整的的文件中，使每个单独背景都宽为10px，各自之间留有适当间距。至于选择宽为10px是为了避免repeat过多造成的性能浪费而选的一个中间值，这个可根据实际情况而定，这样就形成一个行为10x∞（无穷高）的文件；相应的如果是宽带固定、垂直平铺的文件，则放在一个∞（无穷宽）x10px的文件中。
Css Sprites的应用
PS：在读取各背景的时候，可以使用一个小技巧，就是在该图片下新建一层，用深色背景填充，这样查看各背景就一目了然，完成后在去掉该背景保存即可。
第二类是Icon、Button等图片。这类图片一般都是可以固定宽高的，所以可以将同类的图片有规律的列在一起，方便其位置的计算。但对于内容左侧修饰类的Icon图片，最好是统一居左纵向排列，留有适当的间距，这样更加适应不同的内容的变化。
Css Sprites的应用
Ps：处理这类图片时，可以将PS中的网格参考线选取，这样可以更方便的摆放图片。
第三类是一些特殊图片的处理。像高度不确定的平铺类背景、始终居中或居右的图片、列表类内容下的平铺虚线等待这些比较特殊的图片，一定要小心处理，我的原则是安全性第一，然后再能优化则更好，是在不行，可以单独分类拼合。比如不不固定宽度的圆角导航效果，将相应的图片单独拼合在一起也很方便，不是说必须要把所有的图片都拼在一起的。
Css Sprites的应用
2、图片的存储与格式。一般来说，我会将所有平铺背景类的图片存储为.jpg格式，品质方面可以适当调整，因为.jpg格式显示的色彩比较饱和，不至于是背景图片产生很明显的变化；其他Icon、Button类图片则最好存储为.gif或者png-8的，因为这两种格式不会计算图片之间空白部分的大小；而且经常有圆角、渐变类的效果需要半透明来支持，所以这两种格式最适合。
这里要小小鄙视下自己了，因为之前为了保险，几乎每次都是将.gif或者.png-8的图片存为256色的；会上，有朋友提到128色即可保证图片的品质，这样又可以减小图片的大小。
这里需要注意图片的大小。我们的要求：除特殊图片外，每张图片不超过30KB。
3、图片在Css中的应用。我们都知道在Css中通过读取background-position读取合并图片的位置来应用每一个小图片，在读取中，我接触的有三种方法：
第一种、每应用到大图片就读取一次图片的url、repeat、position。这样虽然在服务器端可以认为是一次请求，但无疑大大的增加的了css的体积，尤其是当图片的ur是绝对路径时更是明显。这种方法只在初期应用Css Sprites时可用，不推荐长期使用。
第二种、定义一个类来引用图片的url和repeat，然后在用到position样式的标签中增加一个引用的类。例如：
# .bodyBg {background-image:url(images/all_bg.jpg); background-repeat:repeat-x;}
# .bodyIcon {background-image:url(images/all_icon.gif); background-repeat:no-repeat;}
# <h2 class=”contentTiele bodyBg”>心得体会</h2>
第三种、将所有应用图片position的样式统一定义一个url和repeat，这样在标签class中也不用增加统一定义的类。例如：
# .wp-pagenavi .current,.commentNavi .current{background:url(images/all_bg.jpg) repeat-x;}
相对来说，第三种方法是最合适的，不过可以根据实情情况来应用，方法不是唯一的。
-
- 虚拟机VM9.0，VMware Workstation 9.0汉化破解版附下载地址和注册机(注册码）.(舒克)
powered by shuke 2015-3-26 qq:896158959