CSS clip:rect矩形剪裁功能

朱雀 2021-09-14 19:44 445阅读 0赞

CSS中有一个属性叫做`clip`，为修剪，剪裁之意。配合其属性关键字`rect`可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上基本上没有类似于`max-height`/`display:table-cell`等浏览器的兼容性问题。

根据Dreamweaver的自动提示，`clip`有如下可用属性关键字：

![clip属性支持的关键字 张鑫旭-鑫空间-鑫生活][clip_ _-_-]

就顺序上而言，`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像素。

上面的表述又长有啰嗦又难以理解，你可以这样想象：饥饿N天的你突然面前出现了块香喷喷的大大的300厘米\*300厘米方形手抓饼，你拔出自己随着携带的锋利的日本刀，在距离顶部30厘米的地方咔嚓一刀，然后在距离左边200厘米的地方咔嚓一刀，然后又以迅雷不及掩耳的速度在距离顶部200厘米和距离20厘米的地方咔嚓一刀。啪啪四刀留下的中间的那块就是剪裁的内容了。所以，您可以将`top right bottom left`理解为在这些位置拿大刀咔咔修剪。

或者理解为在photoshop中为大背景建四个方向的参考线，如下图（300像素\*300像素）所示：

![clip:rect值示意与photoshop参考线 张鑫旭-鑫空间-鑫生活][clip_rect_photoshop_ _-_-]

所谓“一图胜千言，千言不敌一实例”。为了更加直观的理解`clip:rect`后面四个值的含义，我专门做了个demo页面。您可以狠狠地点击这里：[CSS clip:rect几个值含义示意demo][CSS clip_rect_demo]

在demo页面中，我已经将4个值分离出来了，您任意修改其中的一个值，页面上就会出现半透明的黑色层示意这部分内容是将会被剪裁掉的。例如，我们修改第一个值为30，如下图：

![修改第一个值为30像素][30]

失去焦点后就会看到图片上出现了改值对应的剪裁作用区域：

![上边缘30像素半透明][30 1]

类似的，我们修改各个框框的值为`30 200 200 20`，这时，图片上的效果就是：

![四边应用剪裁数值后的效果][2018-01-01_231807.jpg]

其中图片中未被黑色半透明层覆盖的区域就是最后的剪裁区域，您可以点击下面的“剪裁”按钮确认剪裁，结果就如下图所示：

![最后的修剪效果图][2018-01-01_231921.png]

您也可以修改其他值做测试的。如果最后图片全部被半透明层覆盖，那么图片最后会被剪裁到一点不剩。

最后有必要说明下：**clip:rect矩形剪裁只能作用于`position:absolute`的元素上**。

### 三、clip:rect矩形剪裁的一些应用介绍 ###

**1. 可用性隐藏**  
根据上面对`top right bottom left`的释义，如果`left >= right`或者`bottom <= top`，则元素会被完全裁掉而不可见，即“隐藏”。通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的，从而提高了页面的可用性。

例如：

clip: rect(1px 1px 1px 1px); /*left = right, bottom = top*/

或

clip: rect(10px 10px 10px 100px); /*left > right*/

或

clip: rect(100px 10px 10px 10px); /*bottom < top*/

等，正所谓小手抖一抖，剪裁有木有。//zxx:上面几个值的效果您可以去part2部分所提供的[demo页面][CSS clip_rect_demo]做测试滴。

**2. img标签下的CSS Sprite定位**  
为了节约图片资源，我们经常会把小图片整合到一张图片上，称为图片合并技术，国外称为CSS Sprite，含“精灵”之意。然后利用元素区域外`background`内容不可见的特性配合`background-position`定位实现图片的精确显示。

就连万万不能没有的钱都不是万能的，显然，`background-position`下的CSS Sprite定位也不可能适用于各种情况。例如，有时我们希望Sprite图片可以延迟滚动加载，或者是可以很轻松的右键图片另存为...或者是某些特殊的`background-position`属性不起作用的情况。

例如，众所周知的，IE6浏览器不支持Alpha透明通道的png图片（会有蓝蓝的背景），例如下图所示：  
![IE6不支持32位png图片示意 张鑫旭-鑫空间-鑫生活][IE6_32_png_ _-_-]

我们可以使用filter滤镜修复这一问题。然而，如果该png图片以background-image的形式滤镜透明化的话是不支持`background-position`定位的，也就是，我们不可能在IE6下使用background属性实现png图片的Sprite定位。此时，要想实现IE6下png图片的Sprite定位只能在页面上完成，使用img标签，而非`background-image`属性。

然后，img标签下的图片是不会像`background-image`一样元素区域外部分自动隐藏，所以，我们需要借助某些手段对齐进行裁剪，此时`clip:rect`就派上用场了。

您可以狠狠地点击这里：[clip:rect下png图片Sprite定位demo][clip_rect_png_Sprite_demo]

demo页面中的沙发png图片完整显示如下：  
![png sprite图片原图 张鑫旭-鑫空间-鑫生活][png sprite_ _-_-]

如果您手头上的浏览器为IE6浏览器，则打开demo页面会看到如下效果：  
![IE6下demo截图 张鑫旭-鑫空间-鑫生活][IE6_demo_ _-_-]

可以看到鼠标移上去后是有Sprite定位切换实现的hover效果：  
![IE6下png图片hover 张鑫旭-鑫空间-鑫生活][IE6_png_hover _-_-]

可以看到为应用透明滤镜的情况下，使用`img`标签配合`clip:rect`轻松实现了Sprite图片的hover切换效果。这在background属性中也能实现，OK，现在点击下面的“IE6 png透明按钮”，应用`AlphaImageLoader`透明滤镜，然后再鼠标经过，结果也是可以实现hover效果的，见下图：  
![应用filter滤镜后的IE6下hover效果 张鑫旭-鑫空间-鑫生活][filter_IE6_hover_ _-_-]

CSS代码如下：

.clip_a{display:block; width:128px; height:128px;}
    .clip_a img{border:0; position:absolute; clip:rect(0 128px 128px 0);}
    .clip_a:hover{border:0;}
    .clip_a:hover img{margin-top:-128px; clip:rect(128px 128px 256px 0);}

由此可见，CSS Sprite的定位不仅仅可以使用`background`属性，在页面上使用`img`标签，配合`clip:rect`剪裁也是可以轻松实现定位效果的。

**3. 图片剪裁的预览效果**  
关于图像剪裁，很早前我曾翻译过一个名为Jcrop的jQuery插件，文章名为“[jQuery照片图像剪裁插件Jcrop中文翻译详解][jQuery_Jcrop]”，其中有个demo是含有剪裁预览效果的，您可以轻轻地[点击这里][Link 1]访问。

里面的剪裁预览采用margin定位，有着较为复杂的计算。  
![图片预览之margin定位 张鑫旭-鑫空间-鑫生活][margin_ _-_-]

实际上，像剪裁预览效果显示用剪裁属性来实现是最合适的了。于是，自己利用自己先前写的原生态的“[图片旋转+剪裁js插件][js]”中的[zxx.crop\_rotation.js][zxx.crop_rotation.js]写了个图片剪裁预览效果demo。

您可以狠狠地点击这里：[clip:rect图片剪裁效果demo][clip_rect_demo]

demo页面中的旋转可以直接当空气，移动，拖动示意区域，就会在右侧看到对应的剪裁预览效果：

![剪裁demo效果预览图][demo]

[clip_ _-_-]: /images/20210813/b74604b98c3042bb91b8e9baea9fba97.png
[clip_rect_photoshop_ _-_-]: /images/20210813/ad14e87e9b3545b5b5d968fd2076b762.png
[CSS clip_rect_demo]: http://www.zhangxinxu.com/study/201103/css-rect-demo.html
[30]: /images/20210813/a7b691db9ee346cdb6b107cd5acd894c.png
[30 1]: /images/20210813/08249976959444759b11728374c244c8.png
[2018-01-01_231807.jpg]: /images/20210813/a4e020c9dbcf40df879ec63f2c6170c3.png
[2018-01-01_231921.png]: /images/20210813/32acdd1491904c88b8d44f836d52acf0.png
[IE6_32_png_ _-_-]: /images/20210813/8e892cdad0c147a89380abf73022478d.png
[clip_rect_png_Sprite_demo]: http://www.zhangxinxu.com/study/201104/css-rect-img-sprite-png.html
[png sprite_ _-_-]: /images/20210813/b98a1431dc014992885bff7194809453.png
[IE6_demo_ _-_-]: /images/20210813/f90419f8915d4c1ca640626cf1ca6d14.png
[IE6_png_hover _-_-]: /images/20210813/6a6c3c73a1a64b43a700d4e71baad738.png
[filter_IE6_hover_ _-_-]: /images/20210813/6aa0532ce3c140a7aefb1165c54295ed.png
[jQuery_Jcrop]: http://www.zhangxinxu.com/wordpress/?p=359
[Link 1]: http://www.zhangxinxu.com/jq/jcrop_zh/demo/example3.html
[margin_ _-_-]: /images/20210813/4edfb7b0ed0e43fe8970d0a99edd83fc.png
[js]: http://www.zhangxinxu.com/wordpress/?p=804
[zxx.crop_rotation.js]: http://www.zhangxinxu.com/study/js/zxx.crop_rotation.js
[clip_rect_demo]: http://www.zhangxinxu.com/study/201104/css-rect-img-preview.html
[demo]: /images/20210813/c526cfe992f54f74afa5ffa25275ae54.png