CSS clip属性用法详解

开发 前端
你对CSS clip属性用法是否熟悉,clip属性必须和定位属性postion一起使用才能生效,并且clip裁切的计算坐标都是以左上角即(0,0)点开始计算,这点不像padding和margin。

本文向大家描述一下CSS clip属性用法,它用来检索或设置对象的可视区域,可视区域外的部分是透明的,另外此属性定义了绝对(absolute)定位对象可视区域的尺寸,必须将position属性的值设为absolute,此属性方可使用。

浅析CSS clip属性用法

clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,而51cto.com介绍的也很少。

应用clip属性需要注意的两点:

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

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

clip属性基础语法:

ExampleSourceCode

  1. clip:auto|rect(numbernumbernumbernumber)  
  2.  

◆取值:

auto: 默认值。对象无剪切

rect(numbernumbernumbernumber): 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。

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定义如下:

ExampleSourceCode

  1. #imgClip{  
  2. position:relative;  
  3. width:159px;  
  4. height:99px;  
  5. background:#FFF985;  
  6. margin:0auto;  
  7. }  
  8.  

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

ExampleSourceCode

  1. #imgClipimg{  
  2. position:absolute;  
  3. clip:rect(21px68px51px38px);  
  4. }  
  5.  

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

  html代码:

ExampleSourceCode

  1. <dividdivid="imgClip"> 
  2. <imgsrcimgsrc="http://www.52css.com/clipimg.gif"width="159"height="99"/> 
  3. </div> 
  4.  

【编辑推荐】

  1. 实用但不被IE支持的十大CSS属性
  2. 三种实用CSS清除浮动方法揭秘
  3. 专家推荐三大“顶级”CSS技巧!
  4. 编写完美CSS代码的五个关键
  5. CSS水平居中和垂直居中多种解决方案

 

责任编辑:佚名 来源: 52css.com
相关推荐

2010-08-31 10:57:44

clipCSS

2010-08-25 15:15:52

CSSclip

2010-09-03 12:46:28

CSSexpression

2010-08-23 15:33:47

CSSpadding

2010-08-23 08:45:08

CSSpadding内边距

2010-09-07 16:46:59

CSSexpression

2010-09-08 16:22:32

PositionCSS

2010-09-02 15:32:51

CSSfloat

2010-08-30 11:34:32

csspadding

2010-09-14 16:04:40

CSSclip属性

2010-08-30 15:06:04

CSSfont-size

2010-08-31 08:51:58

marginCSS

2010-08-23 09:11:18

padding-bot

2010-08-20 16:29:01

padding-lef

2010-09-14 15:04:42

list-styleCSS

2010-09-02 12:58:21

display:inlCSS

2010-08-25 14:26:09

CSSdisplay

2010-08-25 14:36:35

CSSheightwidth

2010-08-25 13:54:29

CSStop

2010-08-25 10:21:49

CSSmargin
点赞
收藏

51CTO技术栈公众号