CLIP: rect 是什么?(转)

Clipping的中文解释就是剪辑的意思,这个属性决定了对象的哪个部位可以被看到。它不会改变任何对象的性质。
Clipping 的区域是一个矩形, 而这个矩形的尺寸取决于于四个边的位置。
这四个边用 top, right, botton, left 来表示。
请注意:这四个边的位置是相对于对象的而不是相对于窗口的。
Clip属性的书写格式是这样的:

Clip rect(top,right,bottom,left)

在这里,top,right,bottom,left的值都是以像素pixels为单位的。

为了更好的理解相对于对象这个含义
,我们看一个例子,比如左面是一幅
285×185的图片,我们对它加入下面这
段代码:

style="clip:rect(0,200,100,0)"


这段代码使图片将以200×100的形式显
示。这是因为rect中规定的200,代表了图片的右端距离是200pixels,也就 是图片的宽度是200pixels;同理, 100定义的则是图片的高度。这样图片就 好象被剪辑了一样,将显示成右下图的样子:

基本原理就介绍这么多,让我们来看两个例子
,一个是静态调整可视区域,一个是动态调整。

在这两个例子中,您可以点击对应的链接,得
到图片四条边的位置,可以点击链接使图片的可视
区按照规定的范围显示,还有您可以点击后,使图
片就像放电影一样,慢慢的展开。


好像这个属性要和position:absolute;一起用才好用


http://hi.baidu.com/godian/blog/item/6169f53dcfd40005baa167d8.html
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值