html css 控制图片局部显示

一般情况下，页面所需要的小图标都是集合在一张图片上的，这样加载页面的时候加载一张图片就够了，不必发送多个图片请求。下面就来看看怎么从整张图片显示我们需要的那块小图标吧：

<input type="button" style="width:79px;height:34px;background:url('bg2.png') no-repeat -34px -191px;">

width:按钮的宽

height：按钮的高

no-repeat: 相对左上角的原点的水平方向位移（正数：图片水平右移，负数：图片水平左移），相对左上角的原点的垂直方向位移（正：图片整体向下移动，负：图片向上移动）

所以，一般这两个参数都是负值。

另外听说还有一个方法，就是用css的

img
{
position:absolute;
[code]clip:rect(0px,60px,200px,0px);

}[/code]

clip:rect(矩形的上边侧与容器左上角原点的垂直的距离，矩形的右边侧距离与容器左上角原点的水平的距离，矩形的下边侧与容器左上角原点的垂直的距离，矩形的左边侧距离与容器左上角原点的水平的距离)

但是这个自己也没搞明白，希望知道的朋友能指点一下！

clip:rect(矩形的上边侧与容器左上角原点的垂直的距离，矩形的右边侧距离与容器左上角原点的水平的距离，矩形的下边侧与容器左上角原点的垂直的距离，矩形的左边侧距离与容器左上角原点的水平的距离)