加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 正文

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

发布时间:2018-08-23 11:02:35 所属栏目:创业 来源:站长网
导读:烈火网(LieHuo.Net)教程 应用clip属性需要注意的两点: 一、clip属性必须和定位属性postion一起使用才能生效。 二、clip裁切的计算坐标都是以左上角即(0,0)点开始计算,如图三所示,这点不像padding和margin,它们两个的右边距和下边距是从最右边和最下

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

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

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

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

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

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


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

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

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读