详解css中用clip剪切图片的原理和方法

最新推荐文章于 2022-09-22 23:01:56 发布

陈谏辉

最新推荐文章于 2022-09-22 23:01:56 发布

阅读量1.9k

点赞数

分类专栏： web页面html开发文章标签： css 浏览器 html 测试

web页面html开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

clip剪切图片示意图
假设原图片的宽度高度500 × 375 （px）

<html>
<head>
<style type="text/css">

</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元素