仔细的研究了一下CSS的Image Sprites

[ 作者:笑傲江湖 发布于:2011年-2月-12日 8:14 星期六  分类:百 宝 箱 ]

  sprite:鬼怪,小妖精,调皮鬼,(童话中的)小仙子,小精灵。这是词霸给的解释,不能是雪碧哦,呵呵。CSS的这个Image Sprites,暂且翻译成图片精灵吧。实际说的是一个图片集合,因为网页里的图片如果太多,加载的时间会很长,对服务器来说,一个下载就是一个请求,如果把一些相关的图片,很小,都放在一个大图片里,这样只需要下载着一个大图片就行了,然后用CSS的Image Sprites来控制什么时候显示大图片中的某一小块图片。这样可以节约带宽,减轻服务器负担。
  具体使用中,一般来说是导航菜单里使用翻转背景图片用的,做出一些动作的特效来(当然你用在其他地方也一样没问题)。比如一个导航的链接,鼠标没有移动上去显示的是一个图片,当鼠标移动上去之后显示另外一个图片,当导航里的链接项目比较多的时候,CSS的Image Sprites优势就体现出来了。
  先来看看要用到的css语句:background:url(img_navsprites.gif) 43px 0px;这是简洁型定义方法,完整的写法是这样的:background:#FFFFFF url(*.*) no-repeat scroll left top;用在Image Sprites上的话,无非是给一个块指定一个背景图片,背景色的参数就可以不要了,背景图片是否重复就看你实际需要了,但是咱们这里要用的背景图片只是一个大图片中的一部分,所以需要用left和top这两个参数来定位具体要用的那一部分图片。实质上是把块要用的图片背景部分显示出来,不用的就隐藏了,而块的宽高咱们已经定义了。看下面的代码:

.img_next{width:43px;height:44px;background:url(img_navsprites.gif) 43px 0px;}


  img_navsprites.gif这个图片里包含了3个小图标,如上图所示,每个小图标之间使用一个像素宽的竖线隔开,从左至右,三个小图标实际的宽度是46px/43px/43px,上面css代码里.img_home这个class定义了块的宽度width:43px;和高度height:44px;,那块能显示的背景图片的宽度和高度也是这么多。再来看最后一句background:url(img_navsprites.gif) 43px 0px;,指定的背景图片是img_navsprites.gif,背景是自动重复的,因为这种简洁写法里,如果没有出现的参数,就是用默认值,是否重复的参数如果没有定义,默认是自动重复背景的。最后的两个像素值就是默认参数的left top的值,在这里咱们理解成背景图像的左右和上下移动。这个43px表示图片img_navsprites.gif向右移动43个像素,因为会自动重复,所以移动的结果就是背景图片里会显示向右的箭头这个图标(也就是原图中最右边的那个图标)。当然,这个43px,你还可以给成-91px,这表示图片img_navsprites.gif向左移动91个像素,最终显示的还是向右的箭头这个图标。你可能会问为何是43px和91px,呵呵,那就麻烦你用Photoshop打开img_navsprites.gif这个图片,标尺的显示单位设置成像素,把图片放大,看看横向,从图片左上角开始,向右91px的位置在哪里;从图片右上角开始,向左43px的位置在哪里。其实这两个位置是同一个位置。也就说明css定义里,43px和-91px的效果是一样的。再说说最后的这个0px,前面说了是表示背景图片的上下移动,0px那就是不用上下移动了,如果你想让它上下移动也行,移动多少呢?呵呵,44px的倍数即可,正负都行,你可以自己测试一下,最后left top的值,用43px 0px和43px 44px,或者是43px -44px,或者是43px 88px,效果是一样的。当然,用-91px 0px和43px 44px,和用-91px 0px和43px -44px,也都是一样的,组合方式就多了去了,罗嗦这么多其实就为了说明白最后的left top这两个值是怎么工作的。left的值,正值表示向右,负值向左。top的值,负值向上,正值向下。从而得知,若咱们使用的大图片里,横向和纵向都有多个小图的时候,left和top这两个值还是都使用负值来的更直观一点。

  为了进一步说明一下,特意弄了个图,把下面例子中的包含两行三列图标的图放大了,纯为演示说明问题。看上图,图中红框就是下例css中.img_home所定义的块,蓝色框表示背景图完整的大小,以红框为基准,咱们幻想一下蓝色框周围是自动重复的多个背景图,块img_home的基准点就是红框左上角带X的地方,以X为基准点,依照块的宽度和高度,background定义里left和top的值都是0,表示蓝色框内的背景图原地不动,但.img_home:hover里定义了left和top的值是0px -45px,表示蓝色框内的背景图左右原地不动,向上移动45个像素,这时,图中B处的颜色稍暗的图标就移动到红色框里了,那img_home这个块的背景图片就变化了,当鼠标移动到img_home块上的时候就显示颜色稍暗一点的这个图标了。原理我理解的是这样的。当然,你也可以把A点的背景图移动下来,top的值给成正值即可,至于给多少,答案留给你自己。剩下的两个块显示的pre和next的图标原理是一样的,只是红框的宽度稍有变化而已。如果background定义里你给定背景不自动重复,加上no-repeat的话,那上图中蓝色框的周围就是空白了啥也没有,你只能使用负值来定义left和top的值了,仅此而已,自己可以试验一下。[因为img_navsprites_hover.gif是个透明的gif图片,所以上图背景是灰白相间的格子表示透明,无他意。]
  下面就弄个具体的实例吧,图片用的是img_navsprites_hover.gif,两行三列共六个图标,如下图所示。具体的css定义看代码。点击运行代码按钮查看,代码框里的内容可以修改,修改之后再次点击运行代码按钮查看修改结果。




标签: CSS Image Sprites

评论0 引用0 浏览3398

说点什么:

正文内容:

 




图片博文
positive negative logo sync