CSSclip：rect矩形剪裁功能及⼀些应⽤介绍
⼀、长话短说
CSS中有⼀个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使⽤上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是，貌似⼤家很少使⽤此属性。我总结了三点原因：⾸先是理解上有些门槛；⼆是其他⼈使⽤的不多；三是此属性功能效果有不少替代⽅案。这种状态有些类似于普通的计算机使⽤者使⽤XP系统⽤得很不错，然后让他去使⽤Mac系统，可能就会因为使⽤不习惯、其他⼈不怎么⽤、功能XP系统基本都有且⽀持更⼴泛⽽⼜回到XP系统上。实际上，哪种操作系统更好呢？我想不⾔⽽喻。
所以，我们使⽤overflow实现⽣硬的剪裁与原⽣的clip剪裁就有些类似于使⽤XP系统与Mac般。
⽼实讲，我⾃⼰使⽤的也不多，仅在两年前在实际项⽬中解决⼀些特殊的问题学习并使⽤了该属性。上个⽉的“”⼀⽂中的可⽤性隐藏部分曾出现了该属性的应⽤，其作⽤就是页⾯元素的可⽤性隐藏，相关CSS代码如下：
.hidden{
position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
根据我⾃⼰的测试，貌似上⾯的第三⾏CSS是多余的。但是，这⾥出现是有其理由的，但是⾃⼰想不出了个缘由，还望他⼈指点迷津。
“美特斯邦威，不⾛寻常路”，正因为似乎⼤家都忽略了clip属性，所以我决定稍稍挖掘下clip的属性，让⼤家开始关注与熟悉此属性。顺带⼀句，这不是号召关⼼中华⽥园⽝这种噱头成分颇多的东西，⽽是实在在的可以在实际项⽬中⼤放光彩的东东。
⼆、clip:rect属性亲密接触
根据Dreamweaver的⾃动提⽰，clip有如下可⽤属性关键字：
其中，据说继承inherit IE浏览器是不⽀持的，所以该属性就是个酱油帝；然后"auto"就是不剪裁之意，除了重置rect的作⽤外，其也是个酱油副帝；所以真正上得了台⾯张脸的就是rect(top right bottom left)，所以，我们下⾯只讨论rect(top right bottom left)这厮。jquery是什么有什么作用
就顺序上⽽⾔，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后⾯四个值的含义，我专门做了个demo页⾯。您可以狠狠地点击这⾥：
在demo页⾯中，我已经将4个值分离出来了，您任意修改其中的⼀个值，页⾯上就会出现半透明的⿊⾊层⽰意这部分内容是将会被剪裁掉的。例如，我们修改第⼀个值为30，如下图：
失去焦点后就会看到图⽚上出现了改值对应的剪裁作⽤区域：
类似的，我们修改各个框框的值为30 200 200 20，这时，图⽚上的效果就是：
其中图⽚中未被⿊⾊半透明层覆盖的区域就是最后的剪裁区域，您可以点击下⾯的“剪裁”按钮确认剪裁：
结果就如下图所⽰：
您也可以修改其他值做测试的。如果最后图⽚全部被半透明层覆盖，那么图⽚最后会被剪裁到⼀点不剩。
最后有必要说明下：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部分所提供的做测试滴。
2. img标签下的CSS Sprite定位
为了节约图⽚资源，我们经常会把⼩图⽚整合到⼀张图⽚上，称为图⽚合并技术，国外称为CSS Sprite，含“精灵”之意。然后利⽤元素区域外background内容不可见的特性配合background-position定位实现图⽚的精确显⽰。
就连万万不能没有的钱都不是万能的，显然，background-position下的CSS Sprite定位也不可能适⽤于各种情况。例如，有时我们希望Sprite图⽚可以延迟滚动加载，或者是可以很轻松的右键图⽚另存为...或者是某些特殊的background-position属性不起作⽤的情况。
例如，众所周知的，IE6浏览器不⽀持Alpha透明通道的png图⽚（会有蓝蓝的背景），例如下图所⽰：
我们可以使⽤filter滤镜修复这⼀问题。然⽽，如果该png图⽚以background-image的形式滤镜透明化的话是不⽀持background-position定位的，也就是，我们不可能在IE6下使⽤background属性实现png图⽚的Sprite定位。此时，要想实现IE6下png图⽚的Sprite定位只能在页⾯上完成，使⽤img标签，⽽⾮background-image属性。
然后，img标签下的图⽚是不会像background-image⼀样元素区域外部分⾃动隐藏，所以，我们需要借助某些⼿段对齐进⾏裁剪，此时clip:rect就派上⽤场了。
您可以狠狠地点击这⾥：
demo页⾯中的沙发png图⽚完整显⽰如下：
如果您⼿头上的浏览器为IE6浏览器，则打开demo页⾯会看到如下效果：
可以看到⿏标移上去后是有Sprite定位切换实现的hover效果：
可以看到为应⽤透明滤镜的情况下，使⽤img标签配合clip:rect轻松实现了Sprite图⽚的hover切换效果。这在background属性中也能实
现，OK，现在点击下⾯的“IE6 png透明按钮”，应⽤AlphaImageLoader透明滤镜，然后再⿏标经过，结果也是可以实现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插件，⽂章名为“”，其中有个demo是含有剪裁预览效果的，您可以轻轻地访问。
⾥⾯的剪裁预览采⽤margin定位，有着较为复杂的计算。
实际上，像剪裁预览效果显⽰⽤剪裁属性来实现是最合适的了。于是，⾃⼰利⽤⾃⼰先前写的原⽣态的“”中的写了个图⽚剪裁预览效果demo。
您可以狠狠地点击这⾥：
demo页⾯中的旋转可以直接当空⽓，移动，拖动⽰意区域，就会在右侧看到对应的剪裁预览效果：
此例旨在展⽰clip:rect的潜⼒，故原理与使⽤略，您有兴趣可参考上⾯提到的，以及demo页⾯相关源代码。
四、清明节前的唠叨
清明时节⾬纷纷，路上⾏⼈欲断魂，看着天⽓像是要下⾬的样⼦。今晚回乡，祭拜先祖。因为乡下没有安装宽带，所以今天直接就在上班时间折腾这篇⽂章了，故结尾处可能略显仓促。另外，资质有限，clip:rect的研究也不深，所以⽂中也难免有表述不准确的地⽅，欢迎指正，不甚感谢。
本⽂的⼏个clip:rect的应⽤实例纯属抛砖引⽟，由于其本⾝功能的特殊性，clip属性⼀定还有其他更加精妙的应⽤，这就要看你的智慧了。
得，就这些。祝“⽶娜桑”节⽇⼀切顺利。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。