html长方形分成两个部分图片,html css 控制图片局部显示

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

width:按钮的宽

height：按钮的高

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

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

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

img

{

position:absolute;

}clip:rect(0px,60px,200px,0px);

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

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

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