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. js跨域_jsonP

    $.ajax("url", type:"get", dataType:"jsonp", jsonp:"callback" ...

  2. Struts2标签之Checkbox

    <s:checkbox name="permisskey" label="帅哥" value="true" fieldValue=&q ...

  3. 搭建Kafka集群（3-broker）

    Apache Kafka是一个分布式消息发布订阅系统,而Kafka环境往往是在集群中配置的.本篇就对配置3个broker的Kafka集群进行介绍. Zookeeper集群 Kafka本身提供了启动了z ...

  4. 雅虎（yahoo）前端优化十四条军规

    第一条.尽可能的减少 HTTP 的请求数 (Make Fewer HTTP Requests ) http请求是要开销的,想办法减少请求数自然可以提高网页速度.常用的方法,合并css,js(将一个页面 ...

  5. stopping NetworkManager daemon failed

    1 初次安装NetworkManager时发现,无法将这个服务关闭 2 上网找了一圈,也没找到原因 3 重启服务器后就能正常关闭了 4 将该服务删除重装也能正常关闭 5 下回重装系统时再观察一下

  6. LoadRunner ERROR：Could not call flex.messaging.io.amf.ASObject.readObject() : Cannot parse date.

    Error: Encoding of AMF message failed. Error is : Exception Occurred while invoking WriteObject meth ...

  7. ws_ webpack+reactjs+redux+nodejs认识

    /** * Created by yangpu on 2016/9/18. */ //环境安装方法1.npm install //加载依赖模块2.npm run build //打包没有压缩,开发环境 ...

  8. svn快速教程

    本文拷贝自网址:http://www.subversion.org.cn/?action-viewnews-itemid-1 如何快速建立Subversion服务器,并且在项目中使用起来,这是大家最关 ...

  9. SQL 存储过程 解析XML

    第一种说明: 我看过这样一篇文章,如下 在SQL   Server2005中,微软延续了   2000中一个特性(即支持XML类型的数据),并加强了对XML   数据列.XML变量以及XML索引的支持 ...

  10. 简单学会.net remoting

    简介 •.net remoting是.net在RPC分布式应用的技术.首先,客户端通过 remoting访问通道以获得服务端对象,再通过代理解析为客户端对象,通过通道来实现远程对象的调用. 原理 •远 ...