html中图片只是一个小图标,如何用css显示一个图片中多个小图标？

去搜一下css中background的用法，一切尽在其中。

最重要的一点是

你要了解背景图片在控制项中显示的起始位置，控制项的高度，宽度。

以下是简要分析，你还要实践一下才能掌握真谛：

对一个宽度40，高度30的div设定一个背景，而背景图片是一张很多小图片的组合。

这里隐含了一个条件，就是小图片的宽度和高度和小图片的间隙要大于等于div的设置，原因：

当你设定背景图片的起始位置时，如果小图片相对div太小，则会显示多个小图片，相反如果小图片在一张整图过大或布局不够友好(比如间隙[上，下，左，右]),那么也是不算符合要求而导致显示不完整或不合你的格。

讲了上面这么多，有一个重要的地方，就是如何设置背景图片的起始位置：

答案就在background-position里面了，当然background也可以设置。

你找找别人的案例就会发现他们的position都设置为负数，比如background-position:-5px -4px;

这个就是背景图片显示的起始位置。那这个数字怎么设定呢？

哈哈，我是不是在卖关子？

呵呵，不卖关子，你咋能记得住。

还有这可是我经验的积累，过程，分享。

说正题，图片在背景的显示坐标(我们就当他是坐标)，为从图片的左上角算起为原点(0,0),

向右则为负(跟一般的横坐标相反),向下也为负(跟纵坐标一样),那么单位(px，当然也可以是其他的)则为刻度，好了，图片定位完成。

接下来就是你想要显示这个背景图片的哪个小图标，请按坐标标记下小图片的起始位置，那么

这就是你想要的background-position的结果了，至于怎么只显示这个小图片，就回到上面的讲的，需要对背景图片布局了，以及实际需求(比如div的高度宽度也觉得使用小图片的大小),

当然你会想，为什么不直接通过background来设置高度和宽度呢？我告诉你，是不行的。

所以你要对控制项div来设置高度和宽度，让小图片刚好显示出来，说了这么多，请看以下样式:

div.myDiv {width:40px;height:30px}

div.myDiv{background-img:url(test.jpg);}

div.normal{background-position:-5px -10px;}

div.over{{background-position:-20px -30px;}

然后是html:

普通情况如下:

当发生onmouseover事件的时候(当然是你自己添加的事件,不过标签是的话就用样式A:over设置了),修改div的样式变成如下:

那么实际情况我只是对position的位置做了调整，也就是相当于修改了背景图片的显示区域。

而这个显示区域的变化就是2张小图片的位置罢了~

好了，讲是讲完了，该你实践了~

实践才是进步的唯一稳步~