当前位置:首页 > 前端技术 > 正文

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="photo">
  <img src="http://www.wzzhang.com/xxx.jpg" alt="CSS 矩形剪裁功能 clip:rect" >
</div>

我们可以这样写css:

#photo{ position:absolute; clip: rect(1px 1px 1px 1px); }
打赏
本文章由 夜歌 于2016年12月15日发布在前端技术分类下,您可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
转载请注明:CSS 矩形剪裁功能 clip:rect-夜歌
关键字:,

好文章就要一起分享!

更多

真的,我想您也会喜欢

发表评论

你的大名(必填)

你的邮箱(必填)

你的网站(选填)

评论内容(必填)

😉 😐 😡 😈 🙂 😯 🙁 🙄 😛 😳 😮 mrgreen.png 😆 💡 😀 👿 😥 😎 ➡ 😕 ❓ ❗