天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>软件应用>CSS基础:详细讲解clip属性的应用

CSS基础:详细讲解clip属性的应用

天极网2009-03-27 15:23我要吐槽

  相关文章:

  CSS实例:创建一个鼠标感应换图片的按钮

  25个能够激发灵感的暗色调CSS Web设计欣赏

  CSS基础:八个困扰新手的网页布局问题

点击查看更多软件资讯内容>>

  clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,本文中介绍了应用clip属性需要注意的几点。

  一、clip属性必须和定位属性postion一起使用才能生效。

  二、clip裁切的计算坐标都是以左上角即(0,0)点开始计算,这点不像padding和margin,它们两个的右边距和下边距是从最右边和最下边开始计算的。

  clip属性基础语法:

  clip属性

  clip属性说明:

  检索或设置对象的可视区域。可视区域外的部分是透明的。

  此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ,此属性方可使用。

  自IE5开始,此属性在MAC平台上可用。对应的脚本特性为 clip 。CSS中的clip属性除了可以制作彩色文字外,还可以有效地裁切其他网页中的元素。

  clip属性设置元素的形状。这个属性用于定义一个剪裁矩形。在这个矩形内的内容才可见,出了这个剪裁区域的内容和 overflow:hidden 的效果相同。剪裁区域可能比元素的内容区大,也可能比内容区小。

  clip属性值:auto | rect (top, right, bottom, left)

  auto代表不裁切,rect中的上右下左四个方向填入的应是数值,表示裁切的位置。

  下面我举一个对图片进行裁切的简单例子。

  首先准备一张图片,它的尺寸是159px*99像素,利用clip属性将图片进行裁切,只让图中的大红点显示出来。

  我先制作一个放置图片的div外框,它的CSS定义如下:

  clip属性

  这个div的定位属性设置为相对定位是为了让图片以它为定位标准,将背景定义为#FFF985是为了让显示效果更明显。

  然后定义图片的裁切属性,CSS定义如下:

  clip属性

  这里的绝对定位是相对于id为imgClip的div而言的,clip中的数值按照上右下左的顺序排列的。

  html代码:

  Clip属性

作者:网页教学网责任编辑:盛晓莹)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级