zoukankan      html  css  js  c++  java
  • clip剪裁矩形

    应用clip属性需要注意的两点:
      一、clip属性必须和定位属性postion一起使用才能生效。
      二、clip裁切的计算坐标都是以左上角即(0,0)点开始计算,如图三所示,这点不像padding和margin,它们两个的右边距和下边距是从最右边和最下边开始计算的。

    clip属性设置元素的形状。这个属性用于定义一个剪裁矩形。在这个矩形内的内容才可见,出了这个剪裁区域的内容和 overflow:hidden 的效果相同。剪裁区域可能比元素的内容区大,也可能比内容区小。
      clip属性值:auto | rect (top, right, bottom, left)
      auto代表不裁切,rect中的上右下左四个方向填入的应是数值,表示裁切的位置。

    #Clip {
      position:relative;
      159px;
      height:99px;
      background:#FFF985;
      margin:0 auto;
      }
    #Clip img {
      position:absolute;
      clip:rect(21px 68px 51px 38px);
    }


    <div id=”Clip”>

      
    <img src=”http://www.onlygrape.com/clipimg.gif” width=”159″ height=”99″ />
    </div>

    div的定位属性设置为相对定位是为了让图片以它为定位标准,将背景定义为#FFF985是为了让显示效果更明显。

    图片的绝对定位是相对于id为Clip的div而言的,clip中的数值按照上右下左的顺序排列的。
    本文转自:http://www.cnblogs.com/mslove/archive/2009/04/14/1435908.html

  • 相关阅读:
    程序开发
    主方法
    日志
    node.js
    二维互换
    前台打断点
    具体的后台断点快捷键
    Jenkins
    断点
    循环
  • 原文地址:https://www.cnblogs.com/weekend001/p/1559342.html
Copyright © 2011-2022 走看看