CSS Sprites图片定位坐标

当网站图片过多时候，web加载图片请求http的次数过多，我们可以考虑将网站上所有的小图合并在一张大图上，需要某张图片的时候我们可以用css定位出这张图片在大图片的位置，这样做的好处是，减少客户端访问服务端的次数，减少服务器的压力。要做到这种效果，请看下面的步骤：

一、下载bg2css_1.4.1.air 工具 (http://www.cssforest.org/blog/index.php?s=download)

二、该软件需要air环境支持才能安装(官方下载：http://get.adobe.com/cn/air/)

三、升级该bg2css_1.4.1.air 工具，使用该软件教程(http://www.cssforest.org/blog/index.php?id=133)

四、通过该工具可以生成图片的坐标位置。

效果图：

代码

<style>
.div_2,.div_1,.div_3,.div_4{background:url(citypic.jpg) no-repeat 0 0;}
.div_2{width:68px;height:66px;background-position:-71px 0;float:left;margin-left:20px;}
.div_1{width:67px;height:68px;background-position:0 0; float:left; margin-left:20px;}
.div_3{width:67px;height:68px;background-position:0 -72px;float:left;margin-left:20px;}
.div_4{width:65px;height:68px;background-position:-73px -74px;float:left;margin-left:20px;}

</style>
</head>
 <div class="div_1"></div>
 <div class="div_2"></div>
 <div class="div_3"></div>
 <div class="div_4"></div>
<body>

citypic.jpg

该图片就是citypic.jpg

转载请注明链接（http://www.cnblogs.com/merrick/），谢谢~