主题:CSS clip属性用法
 楼主 admin 发表于2011-4-9 8:02:14
CSS clip属性用法

这是一个非常实用的CSS属性,且IE6也支持!用于缩放成不同比例的小图片时非常简单,而不需要多余的<div></div>作为容器来装载图片。

clip(剪辑)属性就像一个蒙版。它允许你掩盖矩形的可见区域。要剪辑一个元素:你必须指position:absolute。然后,指定top right bottom left值相对于元素的距离。

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

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

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

 

.clip {

  position: relative;

  height: 130px;

  width: 200px;

  border: solid 1px #ccc;

}

.clip img {

  position: absolute;

  clip: rect(30px 165px 100px 30px);

}

 

 1 lzqdc 发表于2011-4-15 8:00:29

很好,学习一下。

 2 tiesto520 发表于2011-4-25 7:53:24

很好很好

 3 fghjjk 发表于2011-5-10 7:59:53

不错,感谢分享。

 4 jgfker 发表于2011-5-17 7:51:51

看看

 5 fxqrose 发表于2011-5-27 8:08:05

学习啦。。。

 6 ulgljgig 发表于2011-6-14 7:46:33

确实很实用

 7 fali123 发表于2011-6-29 7:46:20

不错不错

 8 devillm 发表于2011-7-12 8:04:52

先收藏了

 9 bawfn 发表于2011-8-2 7:49:56

很好很好

 10 wus1209 发表于2011-8-25 7:44:25

值得收藏

 11 hijee 发表于2011-11-17 8:29:00

不错,介绍的很详细

奇新云平台
切换