CSS一图多用

2013-08-20

在很多时间做web开发都需要使用图标，网页中各种丰富的内容很多都是由图标完成的。

这些图标有些都是一个图标对应一个图片文件，虽然这可以实现其功能，但是深究的话并不是好的解决方案，毫无意义的增加了访问服务器的次数。

今天小猪就来分享如何“一图多用”。即把很多图标放在一张图片上面，而利用css来实现不同的地方显示图片的不同位置实现了类似单个图标的功能

最重要的一点是
你要了解背景图片在控制项中显示的起始位置，控制项的高度，宽度。
以下是简要分析，你还要实践一下才能掌握真谛：
对一个宽度40，高度30的div设定一个背景，而背景图片是一张很多小图片的组合。
这里隐含了一个条件，就是小图片的宽度和高度和小图片的间隙要大于等于div的设置，原因：
当你设定背景图片的起始位置时，如果小图片相对div太小，则会显示多个小图片，相反如果小图片在一张整图过大或布局不够友好(比如间隙[上，下，左，右]),那么也是不算符合要求而导致显示不完整或不合你的格。
讲了上面这么多，有一个重要的地方，就是如何设置背景图片的起始位置：
答案就在background-position里面了，当然background也可以设置。
你找找别人的案例就会发现他们的position都设置为负数，比如

1	background-position:-5px -4px

这个就是背景图片显示的起始位置。那这个数字怎么设定呢？
哈哈，我是不是在卖关子？
呵呵，不卖关子，你咋能记得住。
还有这可是我经验的积累，过程，分享。
说正题，图片在背景的显示坐标(我们就当他是坐标)，为从图片的左上角算起为原点(0,0),
向右则为负(跟一般的横坐标相反),向下也为负(跟纵坐标一样),那么单位(px，当然也可以是其他的)则为刻度，好了，图片定位完成。
接下来就是你想要显示这个背景图片的哪个小图标，请按坐标标记下小图片的起始位置，那么
这就是你想要的background-position的结果了，至于怎么只显示这个小图片，就回到上面的讲的，需要对背景图片布局了，以及实际需求(比如div的高度宽度也觉得使用小图片的大小),
当然你会想，为什么不直接通过background来设置高度和宽度呢？我告诉你，是不行的。
所以你要对控制项div来设置高度和宽度，让小图片刚好显示出来，说了这么多，请看以下样式:

div.myDiv {width:40px;height:30px}
div.myDiv{background-image:url(test.jpg);}
div.normal{background-position:-5px -10px;}
div.over{{background-position:-20px -30px;}

然后是html:
普通情况如下:

1	<div class="myDiv normal" ></div>

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

1	<div class="myDiv over" ></div>

那么实际情况我只是对position的位置做了调整，也就是相当于修改了背景图片的显示区域。
而这个显示区域的变化就是2张小图片的位置罢了~
好了，讲是讲完了，该你实践了~
实践才是进步的唯一稳步~