您当前位置：首页 > web前端 > htmlcss > CSS系列教程：利用clip剪裁矩形图片

CSS系列教程：利用clip剪裁矩形图片

来源：程序员人生发布时间：2013-11-07 03:13:45 阅读次数：2591次

　　网(LieHuo.Net)教程应用clip属性需要注意的两点：

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

　　二、clip裁切的计算坐标都是以左上角即（0,0）点开始计算，如图三所示，这点不像padding和margin，它们两个的右边距和下边距是从最右边和最下边开始计算的。

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

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

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

以下为引用的内容：
<style>
#Clip {
position:relative;
width:259px;
height:199px;
background:#FFF985;
margin:0 auto;
}
#Clip img {
position:absolute;
clip:rect(21px 188px 161px 38px);
}
</style>

　　div的定位属性设置为相对定位是为了让图片以它为定位标准，将背景定义为#FFF985是为了让显示效果更明显。图片的绝对定位是相对于id为Clip的div而言的，clip中的数值按照上右下左的顺序排列的。

　　本文转自：http://www.cnblogs.com/mslove/

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 利用Follow5把信息同步到各大微博、社区

下一篇 CSS 实现文字、DIV层水平自适应屏幕大小

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点