一、什么是CSS Sprite?
解析Yahoo的页面制作,不难发现,其将图标、背景、按钮背景等图片合并成一张图,然后通过坐标来定位背景。这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
二、CSS Sprite的优缺点?
1、优点:
1)其最大的优点便是可以很好地减少网页的http请求,从而提高页面的性能。
2)减少图片的大小,从而减少所在内存空间
3)易于风格更换。只需改变少张图片样式或者颜色,就可以改变整个网页风格。
4)减少图片命名,只需对一张整体的图片命名即可。从而减少网页设计的时间。
2、缺点:
1)引入不必要的背景,并不是所有图片都是背景。有些传达重要信息的图片应该写入HTML页面中
2)开发麻烦,需要测量工具定位每个背景的坐标位置,较为繁琐。
3)维护复杂,如果要更改的图片与原图片大小差别较大,那么就需要调整其他背景图片的位置,增加繁琐度。
3、总结
CSS Sprite很有用处,但是滥用CSS Sprite就会照成效率地降低。可以将内容较为固定,基本改变不大的图片放入一个sprite中。其他的分情况归类,组成不同的sprite。而对于那些经常变动的设计,CSS Sprite还是较为费时间的。
三、CSS Sprite实例--小试牛刀
集合图如下:
代码如下:
1)html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css sprite</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
css:
@charset "utf-8";
/* CSS Document */
.one
{
background-image:url("images/ic.jpg");
background-repeat: no-repeat;
background-position:-309px -202px;
width:57px;
height:58px;
margin:0 auto;
}
.two
{
background-image:url("images/ic.jpg");
background-repeat: no-repeat;
background-position:-82px -399px;
width:57px;
height:58px;
margin-left:684px;
}
.three
{
background-image:url("images/ic.jpg");
background-repeat: no-repeat;
background-position:-233px -269px;
width:57px;
height:58px;
margin-left:684px;
}
效果图如下: