CSS Sprites
在网页的请求中,大部分的时间都消耗在HTML本身文档之外,例如图片、脚本、CSS等的下载。因此要提高WEB下来,减少HTTP的请求,可以从图片、CSS等方面来考虑。而减少HTTP请求将会大大提到WEB性能。下图是针对门户网站的时间消耗统计:
在HTML中,每一个img标记都将产生一次HTTP请求,因此我们可以通过减少图片请求来提高WEB性能。
下面将通过举例说明如何减少image的请求。
举例1:
对于a标签,我们通常会通过CSS来设置其背景图片及hover时变换用的背景图片。参考例子:http://css-tricks.com/examples/CSS-Sprites/Example1Before/default.htm
代码如下:
#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url(‘../img/image1.gif’)}
#nav li a:hover.item1 {background-image:url(‘../img/image1_over.gif’)}
#nav li a.item2 {background-image:url(‘../img/image2.gif’)}
#nav li a:hover.item2 {background-image:url(‘../img/image2_over.gif’)} …
效果如下:
![]()
然而我们可以将这些图片都整合成一张图片,通过设置背景图片的位置来定位需要显示的图片。参考实例:http://css-tricks.com/examples/CSS-Sprites/Example1After/default.htm
代码如下:
#nav li a {background-image:url(‘../img/image_nav.gif’)}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
效果如下:
![]()
另一个关于CSS Sprite的例子可以参考如下:
另外此网站上提供了CSS SPRITE的生成器,相见如下:http://spritegen.website-performance.org/
文章中提到的实例下载:
Example 1 Before
Example 1 After
Example 2 Before
Example 2 After
Photoshop Files
本文参考自:http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/ ,仅次记录,以便学习。