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. 老王讲自制RPC框架.(一.前言与技术选型)

    (#)背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当网站流量很小时,只 ...

  2. django一对多关系的小例题

    urls.py from django.conf.urls import urlfrom django.contrib import adminfrom son1.views import * url ...

  3. IOI2011ricehub米仓

    Description 乡间有一条笔直而长的路称为"米道".沿着这条米道上 R 块稻田,每块稻田的坐标均为一个 1 到 L 之间(含 1 和 L)的整数.这些稻田按照坐标以不减的顺 ...

  4. Java中如何获取spring中配置文件.properties中属性值

    通过spring配置properties文件 1 2 3 4 5 6 7 8 9 <bean id="propertyConfigurer"   class="co ...

  5. VS后台程序无法调用App_Code里的公共类解决方案

    在Web应用程序中不能通过右键项目-〉”添加“-〉”添加ASP.NET文件夹“方式添加 .因为Web应用程序中App_Code就不存在 .不过可以通过手动的方式创建,添加一个文件夹命名为App_Cod ...

  6. JavaScript函数定义和调用 变量作用域

     本文是笔者在看廖雪峰老师JavaScript教程时的个人总结   JavaScript中函数定义可以是这样的格式 function 函数名(参数) {     函数体 } 也可以是这样的格式     ...

  7. 用PHP解析类JSON字符串为数组的实现

    题目:把字符串嵌套关系转换成数组,字符串只包含成对中括号.数字和逗号字符串:(1,(1,2,(1,(1,2,(1)),3)),3,(1,(1,2,((1((1,(1,2,(1,2,3),4,5),3) ...

  8. 安装LoadRunner提示缺少vc2005_sp1_with_atl..

    装自动化负载测试工具LoadRunner前,需要预先安装其运行的基础环境.如:安装LoadRunner 11时就需要先安装Micrsoft Visual C++ 2005 SP1.C++ 2008运行 ...

  9. 微博开放平台开发（一）获取access_token

    因为工作需要,接触到微博开放平台开发.特做此记录方便查用. 一.准备. 1.微博账号.注册很容易. 2.微博账号成为开发者. 登录微博开放平台  登录你注册的账号,然后进入管理中心完善开发者基本信息和 ...

  10. Angular js 之一些简单的js操作

    1.<div ng-if()> </div> 括号里面是布尔值  如果是false那么你ng-if的那个dom就会不显示.(感觉这是angular js中最给力的一点) 一般会 ...