clip:rect矩形剪裁

最新推荐文章于 2022-10-12 11:02:29 发布

weixin_30929011

最新推荐文章于 2022-10-12 11:02:29 发布

阅读量112

点赞数

原文链接：http://www.cnblogs.com/steamedCray/p/5142391.html

版权

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>

转载于:https://www.cnblogs.com/steamedCray/p/5142391.html

weixin_30929011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
clip:rect矩形剪裁

clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换.矩形剪裁还需要绝对定位position:absolute;这个clip有点像background-position这个属性，经常用css雪碧图都会知道。下面就把我测试的代码方式：不能保证每张图片大小都一样，写的一个小...
复制链接

扫一扫