现在的位置: 首页 > 软件开发 > 正文

CSS灵活显示拼接的图片

2010年08月30日 软件开发 ⁄ 共 428字 暂无评论 ⁄ 被围观 3,536+

在我之前的一篇博文《怎样提高网站访问速度缩短网页加载时间》第1条:[减少页面HTTP请求数量]中提及了将大量小图拼接为单张大图的CSS控制方法,当时谈到了将局部图片作为背景图的使用方法,实际上,对于拼接图片的显示,无论是作为背景图使用,还是作为前景图使用,都可以使用CSS完全控制。

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

CSS灵活显示拼接的图片

1、做前景-img标签:

效果:

前景图片控制CSS灵活显示拼接的图片

代码:

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

相关说明:

1、外层使用position:relative,IMG使用position:absolute实现;
2、IMG的width、height设置为大图的宽和高;
3、外层CSS中设置要从整图中取出的局部图的宽度、高度值;
4、IMG的CSS中使用left、top属性设置要取出的局部图的坐标

2、作背景

效果:

 

代码:

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

给我留言

您必须 [ 登录 ] 才能发表留言!

×
#