文章归档友情连接照片地图

【web前端】CSS精灵图片(CSS sprite)使用技巧

分类:前端技术  作者:rming  时间:2011-03-16

引言:

提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数,为了减少HTTP请求次数,最直接有效的方法是使用精灵图片(CSS sprites),精灵图片是把许多图片放到一张大图片里面,通过CSS来显示图片的一部分。

本文的目的不是阐述精灵图片如何让网页下载更快,而是介绍在创建精灵图片时的一些实战经验。

下面是一张精灵图片
CSS Spriting
不要等你完成所有工作后再开始使用CSS精灵

在网站全部完成后,你的CSS和图片也都已经创建好了,这时候你再使用CSS精灵,也就意味着你要返回重写CSS,并且还要把用到的一大堆图片再丢到Photoshop里拼合成一张图片,这是非常痛苦和乏味的。如果在刚开始构建页面时就着手使用CSS精灵,那么一切都会变得简单。

按图片显示相反的方向放置图片

这一条有点难以理解,我是在创建一张大的精灵图片中途失败后才意识到它的。假如一张图片应该出现在一个元素的左边,如下图
appear-left
请将这张图片放在精灵的右边(看上面的示例精灵图片)。用这种方式处理后,当你用CSS移动背景图片时,不可能会有别的图片会(错误的)显示处理。

避免在CSS使用bottom或right定位

当定位CSS精灵中靠后的图片时,使用类似background-position: bottom -300px; 或者 background-position: right -200px;的方式定位非常容易。最初,这一切都能正常工作,但是,一旦你的CSS精灵宽度或高度增加时,你刚才使用的定位方式就发现了错误,因为图片相对右边或者底边的距离已经发生了变化。所以,请使用left和top来定位。

为每张图片留出足够空隙

正如你所看到文章中提供的例子精灵图片一样,许多小图片间都预留了很多空白。为什么不把图片挤得紧凑点让精灵图片尺寸更小点呢?因为使用元素的地方可能包含各种不同的内容,这些内容会导致容器变宽变高,预留了足够的空白的话,在容器大小发生变化时,可以避免其他的图片显示出来。

这有一个例子:
为每张图片留出足够空隙

每个列表都使用一个数字图片作为背景。看看上面的示例CSS精灵,你会发现这几张图片是交错排列的,这样处理后,不管怎么增加,其他的图片都不会显示出来。

不要担心CSS精灵的尺寸大小

如果你有机会以标准的web设计来设计你的网站,那么你必定要将把很多图片放到精灵图片上,并且为这些图片预览出合适的空隙,这很好。精灵图片中的空白空隙不会增加太多文件的体积,在addons.mozilla.org网站上使用的精灵图片尺寸是1,000×2,000,但它仅16.7kb!

原文Url:http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/



  1. lds lds

    这个刚明白是怎么回事

    1. Rming Rming

      @lds, 哈哈,以前还追求图片小,切N片呢,太无知了……

  2. Username Username

    :wink: 对这篇文章有什么看法呢?

提交评论