clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换.

矩形剪裁 还需要绝对定位position:absolute;这个clip有点像background-position这个属性，经常用css雪碧图都会知道。

下面就把我测试的代码方式：不能保证每张图片大小都一样，写的一个小方法，让裁切居中吧！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

*{margin: 0;padding: 0;}

.a{

  width: 2px;height: 300px;

  background: #000;

  position: absolute;z-index: 2

}

.b{

  position: absolute;z-index: 3;

  height: 2px;width: 600px;

  background: #000;

}

</style>

<script src="jquery-1.11.1.min.js"></script>

<body>

  <img id="i" src="01.jpg" alt="" width= "300 " height= "300 " style="position: absolute;top:0;left:0;">

  <div class="a"></div>

  <div class="b"></div>

<script>

  var h=$("#i").outerHeight();

  var w=$("#i").outerWidth();

  var box=100;

  $(".a").css("margin-left",w/2)

  $(".b").css("margin-top",h/2)

  var h1=(h/2)-box,

      w1=(w/2)+box,

      h2=(h/2)+box,

      w2=(w/2)-box;

  $("#i").css("clip","rect("+h1+"px,"+w1+"px,"+h2+"px,"+w2+"px)");

</script>

</body>

　　

clip:rect矩形剪裁的更多相关文章

  1. CSS clip:rect矩形剪裁功能及一些应用介绍

    CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

  2. CSS clip:rect矩形剪裁功能及应用

    .clip{ position:absolute; clip: rect(10px 30px 20px 10px); } 最后有必要说明下:clip:rect矩形剪裁只能作用于position:abs ...

  3. css中clip:rect矩形剪裁功能

    一.示例 img { position:absolute; clip:rect(30px,200px,200px,20px); } 二.理解 clip 属性剪裁绝对定位元素. clip:rect矩形剪 ...

  4. css ：clip rect 正确的使用方法

    CSS clip 是一个极少使用,但又确实存在的属性. 而且,它其实在CSS2时代就有了. w3school 上有这么一句话: clip 属性剪裁绝对定位元素. 也就是说,只有 position:ab ...

  5. clip:rect()

    写进度条的时候用过这个方法,记录一下 它的用法是 .test{ clip: rect(<top>, <right>, <bottom>, <>left) ...

  6. OpenCV的Rect矩形类用法

    转自 http://blog.csdn.net/kh1445291129/article/details/51149849 //如果创建一个Rect对象rect(100, 50, 50, 100),那 ...

  7. clip属性

    clip:rect矩形剪裁功能及一些应用介绍. 其实是这样的,top right bottom left分别指最终剪裁可见区域的上边,右边,下边与左边.而所有的数值都表示位置,且是相对于原始元素的左上 ...

  8. CSS3/SVG clip-path路径剪裁遮罩属性简介

    一.SVG属性和CSS3属性千丝万缕的关系 CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类,还有很重要的一个分支:SVG属 ...

  9. 圆环进度css

    看效果先:http://sandbox.runjs.cn/show/b6bmksvn 参考: jquery圆环百分比进度条制作 CSS clip:rect矩形剪裁功能及一些应用介绍 CSS clip: ...

随机推荐

  1. PHP 知识结构

  2. JS刷新父窗口的几种方式<转>

    常用的有:   window.opener.location.reload();    和  window.location.reload(); 浮层内嵌iframe及frame集合窗口,刷新父页面的 ...

  3. 2017年1月1日 java学习第二天复习

    今天是新年的第一天,以前学习没有总结习惯,学习效率和成果都很不好.  学习的过程就是反复的复习和不断学习的过程,开始今天的学习总结   学习java的第二天. 今天学习了java最基础的一些内容,照着 ...

  4. MySQL学习记录--分组与聚集

    一.group by 子句 group by 字句可对数据进行分组. 以MySQL5.5的sakila数据库中的film数据表举例:查找出各个电影等级的电影总数 mysql>SELECT rat ...

  5. 【LeetCode】#1 Two Sum

    [Question] Given an array of integers, return indices of the two numbers such that they add up to a ...

  6. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  7. VC++使用Pro*CC++

    几种数据库访问技术的比较 由上所述, Visual C++ 通过以上方法都可以访问Oracle 数据 库, 但是上述方法各有优缺点.ODBC 出现得比较早, 几乎支持所 有的关系型数据库, 而且有MF ...

  8. 从客户端(Content="<p>测试</p>")中检测到有潜在危险的 Request.Form 值

    .NetFrameWork 4.0 Validaterequest="false"不起作用 要恢复到2.0的ASP.NET请求验证功能的行为,要在以下设置 Web.config中 ...

  9. C#获取全部目录和文件

    public class FileAccess{ //储存所有文件夹名 private ArrayList dirs; public FileAccess() { dirs = new ArrayLi ...

  10. C# Socket连接 无法访问已释放的对象

    在进行Socket长连接时,若服务器或客户端出现异常时,另外一端对Socket对话进行操作时,程序会出现无法访问已释放的对象的问题.例如客户端出现问题主动断开Socket时,当服务器操作Socket时 ...