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. hdu 5587 Array

    题目链接:hdu 5587 前两周 bc 上的题了,因为赶大作业所以没有去打,看了下官方给出的思路,感觉好强大~~竟然能转化成求二进制数 1 的个数: 然后数位 dp 就行了, #include< ...

  2. MAC usb启动盘制作

    1.从App Store 下载OS 2.磁盘工具格式化磁盘默认即可 3. 为啥截图,因为有些是不一样的,建议使用 Tab建,    未命名则是你移动U盘命名的名称. 4.完成:所有的命令完成的话, 终 ...

  3. VB关闭其他进程的输入法

    http://files.cnblogs.com/files/liuzhaoyzz/%E5%85%B3%E9%97%AD%E5%85%B6%E4%BB%96%E8%BF%9B%E7%A8%8B%E8% ...

  4. LSMW批处理工具操作手册

          目录     1. 创建PROJECT 1 2.第一步:初始界面后点击执行出现如下对话框 3 3.第二步:维护源结构 8 4.第三步:Maintain Source Fields 9 4. ...

  5. Python之路 day3 全局变量、局部变量

    #!/usr/bin/env python # -*- coding:utf-8 -*- #Author:ersa """ 全局与局部变量 在子程序中定义的变量称为局部变 ...

  6. 实现View的移动的方法总结

    btw:这篇博客的内容其实算是<Android开发艺术探索>的一篇读书笔记,在书本的知识上加了一点自己的理解,并用自己的话描述出来.<Android开发艺术探索>是一本不错的书 ...

  7. document.all.wb.ExecWB

      <%@ page language="java" pageEncoding="UTF-8"%>   <%@ taglib uri=&quo ...

  8. 突破php的imagecopyresampled 和imagecopyresized 实现图片马JPG

    编辑器加载中...之前有人发布了 利用PNG 图片上述压缩函数的方法 原理利用 PNG的结构IDAT chunks填充一句话webshell,并进行一套取模运算 详见: https://www.ido ...

  9. 在windows不能正常使用boost og

    现象: 1. 在两个不同的dll中使用static的boost.log.在一个dll中的设置在另一个dll中没有起作用 原因:core::get()返回的是一个单例.在不同的dll中是不同的对象 解决 ...

  10. NFA引擎匹配原理

    1       为什么要了解引擎匹配原理 一个个音符杂乱无章的组合在一起,弹奏出的或许就是噪音,同样的音符经过作曲家的手,就可以谱出非常动听的乐曲,一个演奏者同样可以照着乐谱奏出动听的乐曲,但他/她或 ...