CSS Sprites合并多个小图片

网页中经常涉及到很多小图片，一般能达到几十个，如果每个小图片来一次http请求，请求个数多大几十个。使用css sprites技术服务器端只需要将一个包含所有小图片的图片发送过来，由客户端使用css的背景图片及背景图片位置属性来显示图片即可。如此一来大大减少了服务器端的压力。

 

如今css sprites技术已经被很多大型网站使用，使用火狐的firebug观察google搜索页面的请求，会发送服务器端返回如下图片，此图片中包含了搜索页面大部分图片

而google log的html源码为

<a title="Google 首页" href="http://www.google.com.hk/webhp?hl=zh-CN" id="logo">Google<img width="167" height="318" alt="" src="/images/nav_logo83.png"></a>

 其中logo对应css为

#logo {
    display: block;
    height: 41px;
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 114px;
}
#logo img {
    background: none repeat scroll 0 0 #F5F5F5;
    border: 0 none;
    left: 0;
    position: absolute;
    top: -41px;
}

 

参考了如上代码，自己试了下

原图片包含四个小图标，每个小图标大小为9px*9px，即大图片大小为18px*18px，如下

需要的效果，及在html页面每一行显示一个小图标

css源码

#plusImageButton {
	display:block;
	overflow:hidden;
	position:relative;
	width:9px;
	height:9px;
	margin:5px 5px 5px 5px;
}
#plusImageButton img{
	border:none;
	position:absolute;
}

注意其中plusImageButton的width、height为小图片的长和宽

 

 html源码：

<table>
	<tr>
		<td>
			<a id="plusImageButton">&nbsp;<img width="18px" height="18px" style="left:0px; top:-9px;" src="../images/plusAndMinus.png"/></a>
			<a id="plusImageButton">&nbsp;<img width="18px" height="18px" style="left:-9px; top:-9px;" src="../images/plusAndMinus.png"/></a>
			<a id="plusImageButton">&nbsp;<img width="18px" height="18px" style="left:0px; top:0px;" src="../images/plusAndMinus.png"/></a>
			<a id="plusImageButton">&nbsp;<img width="18px" height="18px" style="left:-9px; top:0px" src="../images/plusAndMinus.png"/></a>
		</td>
	</tr>
</table>

注意其中img的width为大图片的长，height为大图片的宽。style中的left和top是为了控制显示哪个小图片，位置相对于大图片的左上角顶点而言

 

自动生成CSS Sprites的代码工具介绍：

介绍一个简单免费的小工具，用于自动生成CSS Sprites的代码。CSS Sprites 样式生成工具下载。用该工具打开上面的图片，选中图片中的某块。如下图的“绿色大拇指”部分，工具会计算出这个部分的长、宽、距离左上角的距离。勾选复制类名、复制宽、复制高，再点击“复制当前样式”按钮。这样生成的样式会被复制到剪切板上。

 

参考：

http://www.mangguo.org/css-sprites-image-cut-and-optimize-skill/

http://www.mangguo.org/css-foreground-image-merge-technology/