方法一：
用CSS中元素的background : background-color || background-image || background-repeat || background-attachment || background-position
示例：
解释：
实例：
[xhtml:nogutter] view plaincopy
<html>
<head>
<style type="text/css">
a
{
width:100px;
height:35px;
background:transparent url(http://hi.csdn.net/attachment/201010/13/139538_1286966876A7AV.jpg) no-repeat scroll -20px -20px;
}
a:hover
{
width:100px;
height:35px;
background:transparent url(http://hi.csdn.net/attachment/201010/13/139538_1286966876A7AV.jpg) no-repeat scroll -140px -20px;
}
<style>
</head>
<body>
<a href="#" mce_href="#">测试</a>
</body>
</html>
方法二：
用img的clip属性中的rect，clip:rect(y1 y1 x2 x1)参数说明如下：
y1=定位的y坐标(垂直方向)的起点
x1=定位的x坐标(水平方向)的起点
y2=定位的y坐标(垂直方向)的终点
x2=定位的x坐标(水平方向)的终点
注:坐标的起点是在左上角
[c-sharp:nogutter] view plaincopy
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(20px 100px 50px 20px);
}
</style>
</head>
<body>
<p><img border="0" src="http://hi.csdn.net/attachment/201010/13/139538_1286966876A7AV.jpg"/></p>
</body>
</html>
上面可以看出控制图片显示的关键在于clip:rect(20px 100px 50px 20px)这句，千万不要忘记position:absolute;这是用于使用绝对值来定位元素。