[转] 详解css中用clip剪切图片的原理和方法【总结】
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元素
?