如何用CSS显示图片的一部分

nianzhang747 2010-01-25 11:17:18

我的问题是将一张图片是有几个小图片整合到一起的当我在页面用的时候不用每个图片都加在只要在程序启动的时候加载一张集合所有小图片的大图片即可这样我在用图片的时候只要用CSS截取图片中我想要的那部分应该如何实现

这样实现的话图片显示的有些问题

http://www.w3schools.com/css/img_navsprites.gif
这个链接是测试图片

大家可以试验一下

<html>

<head>

<style type="text/css">

img.next

{

width:43px;

height:44px;

background: transparent url("img_navsprites.gif") 0 0;

border:0;



}

</style>

</head>



<body>

<div width="200px" height="300px">

<br/>



<img  class="next" />



</div>



</body>

</html>

...全文

2284 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

cs5276 2010-01-25

打赏
举报

这用的是CSS SPrites技术，就是通过设置background-image的position属性“拖动”大的图片在盒子里，把要显示的区域显示出来。

这里有一篇关于CSS Sprites的文章，相信读过之后对你肯定有帮助。

http://www.okajax.com/a/200906/CSS_Sprites.html