CSS clip:rect 矩形剪裁功能,截取图片某一块

最近我在制作一款主题的时候,在自适应css设计中,为了调整图片大小,又不愿意改变图片比例的情况下,用到了CSS剪裁功能。

说实话,这个功能在国内运用的比较少。CSS中有一个属性叫做clip,为修剪,剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是,貌似大家很少使用此属性。我总结了三点原因:首先是理解上有些门槛;二是其他人使用的不多;三是此属性功能效果有不少替代方案。

我们使用overflow可以实现块内容的剪裁,而图片剪裁我们却很少用到。我们往往是将图片进行等比例缩小。所以很少用到clip剪裁。但是等比例缩小问题来了,他很可能不能将图片缩小为我们想要的尺寸。那么用clip属性就省事不少。

相关CSS代码如下:

.hidden{
 position:absolute;
 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
 clip: rect(1px, 1px, 1px, 1px);
 }

其中方向含义为rect(top right bottom left),就顺序上而言,top → right → bottom → left,在CSS中是统一相承的,就像是margin的四个值的顺序,border-width等等的四个值顺序——从头顶上开始,顺时针旋转的说~~不过这里的四个值是不可以缩写的。

其中top right bottom left表示各个位置的属性值,就像是width:200px;中的200px,所以,我们会有类似下面的使用:rect(30px 200px 200px 20px)

那这里的top right bottom left究竟指什么的?我们该如何理解呢?

其实是这样的,top right bottom left分别指最终剪裁可见区域的上边,右边,下边与左边。而所有的数值都表示位置,且是相对于原始元素的左上角而言的。于是rect(30px 200px 200px 20px)表示的含义就是:最终剪裁的矩形的上边距离原始元素的上边缘30像素;剪裁矩形的右边缘距离原元素左边缘的距离是200像素;剪裁矩形的下边缘距离原元素顶部的距离为200像素;剪裁矩形的左边缘距离原元素左边缘的距离时20像素。如下图(300像素*300像素)所示:

CSS clip:rect 矩形剪裁功能,截取图片某一块

这样就不难理解了。但是在实际使用过程中可能与我们想向中的不符。那么就需要不断的改变其四个值去进行尝试。其实我在使用marginpadding属性的时候就经常改变四个值进行微调。

当然,这个属性比较糟心的前提是,图片需要在绝对定位之下才能使用,且使用后可能会改变图片位置。这时候就需要用left right margin-left:-xx margin-right:-xx来调节位置了。当然也可以设置其父元素为绝对定位。而且父元素使用clip对子元素同样有效。如下Html:

<div id="123">
<img src="http://www.xszzz.com/xxx.jpg" alt="CSS clip:rect 矩形剪裁功能,截取图片某一块" >
</div>

我们可以这样写css:

#123{
 position:absolute;
 clip: rect(1px 1px 1px 1px);
 }

好了,此文到此结束,大家不妨试试~

文章链接:http://www.xszzz.com/2016/12/1305.html  本站文章大部分整理自互联网,若侵犯您权益请留言告知,我们会及时处理。

关于本文作者:洃少

醉风云博主,爱好建站和视觉设计。曾从事物资管理,内容运营和产品运营工作,现为自由职业者。