首页 >> 网站技术 >> CSS Sprite (CSS精灵)

CSS Sprite (CSS精灵)

Catagory:网站技术, Date:2010年11月15日,Author: 工业品营销-贾定强

也许你遇到过这样的情况,当你看到一个好看的网站,想下载它的图片时,发现下下来的不是一个单独的图片,而是好多图片组合在一起的一张大图片。这就是典型的CSS精灵。

CSS精灵,英文名称CSS Sprite,是一种将网站中的小图片组合成一张大图片在网站中使用的方式。为什么要将小图片组合成大图片呢?主要是为了减少浏览器对服务器的请求次数。因为用户在浏览网站的时候,每次请求都是需要时间的。也许你的网页代码,图片,JS等的下载并不是最占用用户浏览时间的,占用户浏览时间最多的是用户每次的请求时间。html每个请求都要经过TCP协议的三次握手,用http watch观察一下浏览网站的时间构成,就能发现,请求占用的时间还是非常多的。所以,有效的减少http请求的次数是加快网站速度的一个方面。CSS精灵正是通过这个来优化你的网站的。

当然,将所有的小图片组合成大图片,无疑在下载大图时会变慢,此时会对网站的速度带来一定影响。所以,并不是所有网站都适合使用css精灵的。需要衡量使用css精灵带来的利弊,然后再确定是否使用。当然,如果你的网站有很多小图,这些小图组合起来的大图也不大的话,必然很适合使用css精灵进行优化。

CSS精灵的具体操作其实很简单,基本原理就是将组合的大图作为每一个需要小图的控件的背景,然后通过调整背景图片的位置来显示不同的图片。再具体的就不说了,自己网上看一下,很简单的。http://cn.spritegen.website-performance.org/这个网站能够通过上传小图,自动生成大图,并生成了使用的css代码,可以帮你更快的上手css精灵。 Метро Жулебино теннискак сделать камин в квартире своими руками

来源:工业品营销,原文地址:http://www.jiadingqiang.com/1667.html,欢迎分享本文,转载请保留出处!

Comments: One Response to “ CSS Sprite (CSS精灵) ”
十二月 29th, 2011

给点实例讲解下

[回复]

你也来说几句:

名字*必填
邮箱*必填,不会被公开
网站
QQ群交流
最近文章
文章归档
  • 2017 (16)
  • 2016 (31)
  • 2015 (63)
  • 2014 (21)
  • 2013 (38)
  • 2012 (25)
  • 2011 (67)
  • 2010 (268)
  • 2009 (19)