css中clip:rect矩形剪裁功能

一、示例

img {
  position:absolute;
  clip:rect(30px,200px,200px,20px);
}

二、理解

clip 属性剪裁绝对定位元素。

clip:rect矩形剪裁只能作用于position:absolute的元素上。

表示的含义就是：最终剪裁的矩形的上边距离原始元素的上边缘30像素；剪裁矩形的右边缘距离原元素左边缘的距离是200像素；剪裁矩形的下边缘距离原元素顶部的距离为200像素；剪裁矩形的左边缘距离原元素左边缘的距离时20像素。

三、浏览器支持

所有主流浏览器都支持 clip 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

四、应用介绍

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*/

2. img标签下的CSS Sprite定位

3. 图片剪裁的预览效果

原文：http://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/

转载于:https://www.cnblogs.com/lvmylife/p/5334823.html