css中clip:rect矩形剪裁功能

2023-08-10 16:42:16

一、示例

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. 图片剪裁的预览效果