clip:rect矩形剪裁

時間 2019-11-21

標籤 clip rect 矩形剪裁简体版

原文原文鏈接

clip:rect(top right bottom left);依據上-右-下-左的順序提供自圖片左上角爲(0,0)座標計算的四個偏移數值，其中任一數值均可用auto替換.css

矩形剪裁還須要絕對定位position:absolute;這個clip有點像background-position這個屬性，常常用css雪碧圖都會知道。html

下面就把我測試的代碼方式：不能保證每張圖片大小都同樣，寫的一個小方法，讓裁切居中吧！jquery

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。