css实现对背景图片的定位，获得一张图片上不同位置的内容

实现这个小技巧也不是新鲜事。

使用CSS的背景属性，实现对背景的定位，这样就可以根据需要取出不到的图像位置实现只读一次，多处使用。

 

实现起来不难，最根本的代码就是：background-position:X Y，用于定位背景图片。

 

下面有个例子，以例说话：

 

这是我用于实现一个wiki可视化编辑器时所用到的。wikiTool.gif（16*352，有22个图标） 这张图片有所有的工具按钮图标，tool1,tool2就分别是不同的按钮。每个按钮就是16*16像素。

#tool1,#tool2{
    background:url(wikiTool.gif) no-repeat;
    border:1px solid;
    width:16px;
    height:16px;
    float:left;

}

#tool1{
    background-position:0px 0px;        //这里是取出第一个按钮的图标
}

#tool2{ 
    background-position:0px -16px;     //这里是取出第二个按钮的图标
}

 

<div id="tool1"></div>

<div id="tool2"></div>