CSS 图片拼接技术

对于拼接图片的显示，无论是作为背景图使用，还是作为前景图使用，都可以使用CSS完全控制。

下面就以显示以下拼接图片中第2行的Google图标为例分别详解之：

1、做前景-img标签:

效果:

前景图片控制

代码:

1

<a href="#" title="CSS灵活显示拼接的图片" style="display:block; width:137px; height:49px; margin:9px 0 0; overflow:hidden; position:relative;">CSS灵活显示拼接的图片--前景图片控制<img src="http://m.opensoce.com/2010/08/nav_logo14.png" alt="CSS灵活显示拼接的图片" width="167" height="222" style="border:medium none; left:0; top:-41px; position:absolute;" /></a>

相关说明:

1	1、外层使用position:relative，IMG使用position:absolute实现;

2	2、IMG的width、height设置为大图的宽和高;

3	3、外层CSS中设置要从整图中取出的局部图的宽度、高度值;

4	4、IMG的CSS中使用left、top属性设置要取出的局部图的坐标

2、作背景

效果:

代码:

1	<div style="width:137px; height:49px; background:url(http://m.opensoce.com/2010/08/nav_logo14.png) 0 -41px;">CSS灵活显示拼接的图片--背景图片控制</div>