=波波日志 > HTML/WML/CSS兼容/XML > CLIP: rect 是什么?=
[转]CLIP: rect 是什么?
Clipping的中文解释就是剪辑的意思,这个属性决定了对象的哪个部位可以被看到。它不会改变任何对象的性质。
Clipping 的区域是一个矩形, 而这个矩形的尺寸取决于于四个边的位置。
这四个边用 top, right, botton, left 来表示。
请注意:这四个边的位置是相对于对象的而不是相对于窗口的。
Clip属性的书写格式是这样的:
Clip rect(top,right,bottom,left)
在这里,top,right,bottom,left的值都是以像素pixels为单位的。
为了更好的理解相对于对象这个含义,我们看一个例子,比如左面是一幅285185的图片,我们对它加入下面这
段代码:style="clip:rect(0,200,100,0)"

这段代码使图片将以200100的形式显
示。这是因为rect中规定的200,代表了图片的右端距离是200pixels,也就 是图片的宽度是200pixels;同理, 100定义的则是图片的高度。这样图片就 好象被剪辑了一样,将显示成右下图的样子:
基本原理就介绍这么多,让我们来看两个例子,一个是静态调整可视区域,一个是动态调整。
在这两个例子中,您可以点击对应的链接,得到图片四条边的位置,可以点击链接使图片的可视
区按照规定的范围显示,还有您可以点击后,使图片就像放电影一样,慢慢的展开。

Clipping 的区域是一个矩形, 而这个矩形的尺寸取决于于四个边的位置。
这四个边用 top, right, botton, left 来表示。
请注意:这四个边的位置是相对于对象的而不是相对于窗口的。
Clip属性的书写格式是这样的:
Clip rect(top,right,bottom,left)
在这里,top,right,bottom,left的值都是以像素pixels为单位的。
为了更好的理解相对于对象这个含义,我们看一个例子,比如左面是一幅285185的图片,我们对它加入下面这
段代码:style="clip:rect(0,200,100,0)"

这段代码使图片将以200100的形式显
示。这是因为rect中规定的200,代表了图片的右端距离是200pixels,也就 是图片的宽度是200pixels;同理, 100定义的则是图片的高度。这样图片就 好象被剪辑了一样,将显示成右下图的样子:
基本原理就介绍这么多,让我们来看两个例子,一个是静态调整可视区域,一个是动态调整。
在这两个例子中,您可以点击对应的链接,得到图片四条边的位置,可以点击链接使图片的可视
区按照规定的范围显示,还有您可以点击后,使图片就像放电影一样,慢慢的展开。

类别:HTML/WML/CSS兼容/XML 作者:转载 日期:2009-06-29 【评论:1】
- dajian
日期:2009-10-12 16:02:42 IP:221.222.*.*
你很牛管理员回复(2009-10-12 17:06:29)
转别人的,O(∩_∩)O~
发表留言
百度赞助
同类热门博文
- ·IE对CSS样式表的限制..
- ·HTML 5 WebSocket J..
- ·html5 websocket 通..
- ·Firefox上传文件获取..
- ·javascript获取file..
- ·URL转码方法及不能被..
- ·IE/Firefox/W3C浏览..
- ·Firefox textConten..
博格Tag
- flash/flex/fcs/AIR(752)
- Asp.Net/C#/WCF(598)
- 操作系统及应用软件(376)
- JavaScript/Ajax(330)
- SQL及数据库(134)
- 黑客技术(115)
- Asp/VBScript(111)
- HTML/WML/CSS兼容/XML(102)
- PHP/apache/Perl(96)
- 网站排名及优化(92)
- 其他(75)
- showbo日志(66)
- lucene.net/分词技术(33)
- 计算机网络(26)
- 机械重工(26)
- C#设计模式(24)
- Google Maps开发(17)
- 日语学习(15)
- Canvas/VML/SVG(13)
- linux(11)
- 游戏开发(8)
- 正则表达式(5)
- Jsp/Java(4)
最新博文
随机博文
