后退 刷新 前进 收藏 顶部 |   知道 黑匣子 富媒体 技术服务

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;}

相对来说,第三种方法是最合适的,不过可以根据实情情况来应用,方法不是唯一的。
进度:100% 返回资源共享

虚拟机VM9.0,VMware Workstation 9.0汉化破解版附下载地址和注册机(注册码).(舒克)

图片新热点

导航


目录


    站内搜索
    首页 | W3C | ME