[转] 详解css顶用clip剪切图片的原理和方法【总结】
日期：2014-05-17 浏览次数：20817 次
clip剪切图片示意图
假设原图片的宽度高度500 × 375 （px）
<html>
<head>
<style type="text/css">
<!--
img {
????? position:absolute;
????? clip:rect(20px 400px 210px 200px);
}
-->
</style>
</head>
<body>
<img src="http://photo7.yupoo.com/20070428/081241_1280937036.jpg" width="500" height="375" />
</body></html>
<!--clip用法说明：
clip剪切的原理：实际上就是定位"剪切线"的位置，然后从"剪切线"处剪开，保留剪切线封闭的边框内的图片，剩下来的就是处理后的图片。图片不会发生缩小和放大，只是4个边缘被不同程度的剪掉。（"剪切线"是形象的说法，相当于平时剪纸时定位的"虚线",这个虚线就是要用剪刀剪断的地方。"剪切线"就相当于这里的要剪的"虚线"。把四周的虚线剪开，就得到一个新的图片，而这种虚线至少有一条。最多有4条，分别叫上虚线、右虚线、下虚线、左虚线。上虚线距离图片上边缘为20px；下虚线距离图片上边缘为210px；右虚线距离图片左边缘为400px；左虚线距离图片左边缘为200px。然后从虚线处剪开，虚线内的图片，即为显示的图片。该图片被clip剪切后不会产生左右移动，上下也不会移动。图片也不会缩放。
clip:rect(上边 右边 下边 左边)
clip:rect(20px 400px 210px 200px);
clip:rect(0 400px 210px 0);定位右虚线和下虚线剪切图片的右边和下边
clip:rect(100px auto auto 200px);剪图片的上边和左边
clip:rect(0 400px auto 0);只剪图片的右边,可以用来控制图片的宽度，而不缩放图片，特别是大图
测试表明：火狐和谷歌浏览器也支持这个clip属性和值
■要结合position:absolute;使用，用来修饰img元素
?
