CSS CLIp属性(用来做图片蒙板)

定义

clip 属性设置元素的形状。

当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

继承性：No

说明

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

JavaScript 语法

CSS 属性也可通过一段 JavaScript 被动态地改变。

脚本语法：

object.style.clip="rect(0px,50px,50px,0px)"在我们的 HTML DOM 教程中，您可以找到更多有关 clip 属性 的细节。

在我们的 HTML DOM 教程中，您也可以找到完整的 Style 对象参考手册。

例子

img 

  {

  clip: rect(10px, 5px, 10px, 5px)

  }

  值                                      描述 

shape 设置元素的形状。合法的形状值是：rect (top, right, bottom, left) 

auto 默认。浏览器可设置元素的形状。 

回答者： 獵戶座 | 八级 | 2010-6-9 10:15

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

当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

实例

剪裁图像：

img

  {

  position:absolute;

  clip:rect(0px,60px,200px,0px);

  } 

转载于:https://www.cnblogs.com/yuchav/archive/2011/10/19/2217658.html