站长学堂
你的位置: 中国个人站长站 -- 站长学堂 -- 网页制作 -- HTML/CSS教程 -- 文章正文 Clip属性的应用
推荐位

Clip属性的应用

中国个人站长站 HTML/CSS教程 点击数: 更新时间:2004-10-29 9:31:22
Clip属性的应用

  上一节说到了动态可视区的调整,实际上就是Clip属性的应用。
  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定义的则是图片的高度。这样图片就 好象被剪辑了一样,将显示成右下图的样子:

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

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

  哇,怎么这么多功能啊! 链接看第一个例子吧。链接看第二个例子。

  好了,本节介绍了Clip属性的应用实例,有关CSS-P的知识应用讲的差不多了,下
一节我将向您介绍一个动态字幕变换的例子。

 

佚名 文章录入:humianzhizhou    责任编辑:swh 
个人站长站与你风雨同舟!
本站所提供的资源均来源于互联网,如有侵权行为,请与本站管理员联系,我们会第一时间删除!
·如果您发现《Clip属性的应用》文章有错误,也请通知我们修改!
联系邮箱chinageren#126.com,谢谢支持!
站内搜索:
广告服务 | 友情链接 | 联系我们 | 免责声明 | 用户留言 | 网站导航
版权所有:中国个人站长站 2007-2008 未经授权禁止复制或建立镜像 客服QQ号:112731235
copyright © 2007-2008 www.ChinaGeRen.com online services. all rights reserved. 苏ICP备05000059号