css的clip怎么理解

html-css08

css的clip怎么理解,第1张

clip属性说明:

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

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

clip属性基础语法:

clip : auto   rect ( number number number number )

取值:

auto :  默认值。对象无剪切

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

注意事项:

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

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

兼容性:现代浏览器都支持

示例

html:

<div id="imgClip">img src="1.jpg" width="159"height="99" /><br></div>

css:

#imgClip {position:relativewidth:159pxheight:99pxbackground:#FFF985margin:0auto}

#imgClip img { position:absoluteclip:rect(21px 68px 51px 38px)}

在网站设计中,有时候会遇到对一张图片做多处使用,而每处显示的尺寸又不一定都一样,在传统作法中,需要根据不同尺寸

设计不同的图片。不过利用css,能够很好解决这个问题。

一、直接设置图片的width,height,或者直接改变图片的长宽比例

虽然简单方便,但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算,实际显示虽然简单方便,但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算,实际显示时图像会出现像素位移的状况。

二、使用clip剪切

CSS对许多对象提供专门用于对象剪切的样式属性——clip,可用clip属性来处理对象最终的显示内容。

clip 设置对象的可视区域。只对绝对定位的对象有效,应用此属性时,对象必须使用position:absolute

可用值:auto, rect(number,number,number,number)

使用clip属性进行对象剪切时,必须给的4个数值。使用方法如下

clip:rect(number1,number2,number3,number4);

number1~number4分别代表上、右、下、左4个边,相对与左上角坐标(0,0)的偏移值。

(这点与margin四个数值代表边的顺序相同,不同的margin的四个值都是相对于自身内容的四边的偏移)

三、使用div强制剪切

使用overflow:hidden;的对象将强制不显示对象中超过对象范围的部分内容