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)
四、通过该工具可以生成图片的坐标位置。
效果图:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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/),谢谢~