background-position: -186px -22px 定位背景的具体位置..
比如你这个整体图, 是一张背景 , 你就可以通过 background-position:XX
来定位 这个张背景图的具体显示那块内容.. 可以去试试..网上很多素材
光靠字面理解很难，最好自己动手实践
方法一：
<div style="width:600pxheight:200pxbackground:url(路径图片中间部分切成1px宽) repeat-x">
<img src="路径图片左圆角" style="float:left"/>
<img src="路径图片右圆角" style="float:right"/>
</div>
方法二：
<div style="width:600pxheight:200pxbackground:url(图片中间部分切成1px宽)">
<div style="background:url(路径图片左圆角) no-repeatfloat:leftwidth:左圆角宽pxheight:左圆角高px">
<div style="background:url(路径图片右圆角) no-repeatfloat:rightwidth:右圆角宽pxheight:右圆角高px">
</div>
注：切图时，圆角图片一定要连着圆角外的白色部分一起切，中间填充部分可以只切1px宽，实际高度进行填充
background:url(pic.jpg) no-repeat left top后面两个参数就是移动图片位置的，第一个是水平位置，如left或者right或者center，第2个是垂直位置，如top或者bottom或者center，也可以是数字，如
background:url(pic.jpg) no-repeat -10px -20px
具体看你要截取的位置
可以使用以下几种方式：
1、相对定位方式，设置图片的position属性为relative，然后设置left top属性为负数，做到显示中间区域，外层标签要设置overflow属性为hidden不然会撑大。
2、把图片当做背景使用，然后设置背景居中或者手工填写位置。
3、使用图片margin属性，外层标签要设置overflow属性为hidden不然会撑大。
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>图片</title>
<style>
.div1{
width:300px
height:400px
border:1px solid #4EC83B
overflow: hidden
}
.div1 img {
position: relative
left: -100px
top: -150px
}
</style>
</head>
<body>
<div style="float:leftmargin:10px">
第一种
<div class="div1">
<img src="img1.jpg" width="500" height="700" alt="" />
</div>
</div>
<div style="float:leftmargin:10px">
第二种
<div style="width:300pxheight:400pxbackground-image:url(img1.jpg)background-repeat: no-repeatbackground-position:center centerborder:1px solid #4EC83B">
</div>
</div>
<div style="float:leftmargin:10px">
第三种
<div style="width:300pxheight:400pxborder:1px solid #4EC83B overflow: hidden">
<img src="img1.jpg" width="500" height="700" style="margin:-150px -100px" />
</div>
</div>
</body>
</html>
效果如下：
