css 剪辑图片_CSS clip:rect 矩形剪裁功能，截取图片某一块

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

2016-12-14 10:43

4715

最近我在制作一款主题的时候，在自适应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像素)所示：

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

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

我们可以这样写css：

#123{

position:absolute;

clip: rect(1px 1px 1px 1px);

}

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