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. Android 异步消息处理机制

    1.Handler的由来 当程序第一次启动的时候,Android会同时启动一条主线程( Main Thread)来负责处理与UI相关的事件,我们叫做UI线程. Android的UI操作并不是线程安全的 ...

  2. Android 开发如何选择轮子（转）

    一个项目的开发,我们不可能一切从0做起,如果真是这样,那同样要哭瞎.因此,善于借用已经做好的 "车轮" 非常重要,如: 网络访问框架:OKHttp.retrofit.android ...

  3. 首页自动生成静态化html

    由于平台老是出现间歇性502.排查发现,php死进程过多耗费大量系统资源. 除了优化代码之外,静态化可以减少php进程.缓解一下服务器压力. 把首页生成html后,出现问题频率下降.所以需要做首页静态 ...

  4. JSON数据源提供多值参数的实现

    一.应用场景 (1)报表的数据内容需要根据某个参数进行过滤. (2)该参数是一个多值参数,即从一个下拉列表中选择一个或多个项目. (3)报表需要自动运行,因此参数必须有默认值. (4)参数默认值无法在 ...

  5. java.lang.NumberFormatException: For input string: "1608020001 " 错误

    错误: java.lang.NumberFormatException: For input string: "1608020001 "    at java.lang.Numbe ...

  6. jquery1:

    在jquery中:1.window.onload: --->$();所以一般jquery用如下开头: $(function(){ })2.获取元素:$('#div'):获取id为div的元素$( ...

  7. Oracle 数据库简单操作

    现在大型企业一般都用Oracle数据库,Oracle数据库在一般采用expdp,impdp 导出导入数据,但是在操作中经常会遇到一些问题.下面来浅析这些问题. 1. 导出数据 一般导出数据的时候需要建 ...

  8. Shell中的空格和引号

    空格对于linux的shell是一种很典型的分隔符,所以给变量赋值的时候中间不能够有空格.而单引号和双引号,都是为了解决中间有空格的问题.比如string1=this is a string,这样执行 ...

  9. 转发 XHTML 和 DOCTYPE 切换(MSDN)

    使用 Web 标准生成 ASP.NET 2.0 Web 站点 XHTML 和 DOCTYPE 切换 为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式.Internet Explorer.Mo ...

  10. sql数据库表被锁，无法查询

    查看被锁表:   select   request_session_id   spid,OBJECT_NAME(resource_associated_entity_id) tableName    ...