一般情况下,页面所需要的小图标都是集合在一张图片上的,这样加载页面的时候加载一张图片就够了,不必发送多个图片请求。下面就来看看怎么从整张图片显示我们需要的那块小图标吧:
<input type="button" style="width:79px;height:34px;background:url('bg2.png') no-repeat -34px -191px;">
width:按钮的宽
height:按钮的高
no-repeat: 相对左上角的原点的水平方向位移(正数:图片水平右移,负数:图片水平左移),相对左上角的原点的垂直方向位移(正:图片整体向下移动,负:图片向上移动)
所以,一般这两个参数都是负值。
另外听说还有一个方法,就是用css的
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
clip:rect(矩形的上边侧与容器左上角原点的垂直的距离,矩形的右边侧距离与容器左上角原点的水平的距离,矩形的下边侧与容器左上角原点的垂直的距离,矩形的左边侧距离与容器左上角原点的水平的距离)
但是这个自己也没搞明白,希望知道的朋友能指点一下!
clip:rect(矩形的上边侧与容器左上角原点的垂直的距离,矩形的右边侧距离与容器左上角原点的水平的距离,矩形的下边侧与容器左上角原点的垂直的距离,矩形的左边侧距离与容器左上角原点的水平的距离)