您现在的位置: 365建站网 > 365学习 > CSS Sprites技术的实际应用

CSS Sprites技术的实际应用

文章来源:365jz.com     点击数:142    更新时间:2009-09-18 10:18   参与评论
CSS Sprites原理
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景 图片的位置。

CSS Sprites优点
利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;


图1


图2


图3
在公司项目对按钮进行优化中得出一些经验
1、按钮图片不能过大,色彩不能过于复杂,如果色彩过于丰富在合并图片的时候会降低图片的质量,背景变得很粗糙,如图2这样的图片,我在优化按钮的时候将其合并到背景图上,就会使整个背景图片质量降低;

2、相同样式不同颜色的按钮,放在同一行或者同一列中,便于在css中定位,这样在css写background-position的时候只要改动一个坐标就OK了;

3、使用ps这个工具的时候,标尺一定要看清楚,标度的值在标度的下面,我就因为这样做了重复的劳动;

4、每一个系列的按钮要留一部分的空间,方便以后进行扩展,新加一些按钮或者改变一些按钮;

5、因为之前很多HTML页面里的按钮使用了img这样的标签,在对按钮优化的时候不得不大量地改动html里面的代码,为此多了很多的工作量;所以我们一开始在写页面的时候尽量少用img标签直接做按钮,可以采用文字的形式,如“搜索”,放在a标签之间,在css中定位a标签的背景(背景是按钮的图片)来实现按钮的效果,通过设置a标签的text-indent:-999em,这样在按钮中就看不见文字了,如果背景不包含文字就不需要设置这个属性了,通过设置font和color属性来实现按钮的文字效果;

6、图3这种背景一般用在新闻列表中,实际应用的时候列表的行高往往比背景中的序号要大,所以在背景合并图片中间距应该比一般按钮要大些,这样在页面中就不会将多余的按钮给显示出来;

以上是我在对按钮图片进行优化整合的时候的一点体会!如果有些不足或者需要补充的地方请留言!
Tag标签: 网页优化,web标准

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (142人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------