如何在没有 Canvas 的情况下使用 Jquery 裁剪框架

Question

我需要为国际象棋制作一个骑士（我正在开发的一个新项目）。我有一张包含所有部件的精灵表，但我很难只使用其中一个。我需要一块 130 像素 x 130 像素的正方形。我选择了一名骑士，因为为什么不呢（不必在示例中）。 是我正在使用的精灵表。我尝试使用 jQuery 脚本附加新图像，然后尝试调整大小等，但没有成功。然后我制作了一个

<div>

并调整了它的大小，但我无法使用 jQuery 将背景图像设为国际象棋精灵。该代码是：

$('.pieces > .white').append('<div class="white wKnight wK' + wK + '" style="width: 130px; height: 130px"></div>');
$('.wK' + wK).css('background-image', ChessSprites.png)

HTML：

<div class="pieces">
  <div class="white"></div>
  <div class="black"></div>
</div>

wK

代表

whiteKnight

，它从 1 开始，并为每个创建的骑士计数，因此每个骑士都可以单独调用。我知道可能有比这更好的方法，但我仍在学习，这就是我所理解的。我不想使用画布，因为在我看来，这会非常过度且困难。

Answer 1

要将元素的背景设置为图像的任意部分，您可以使用

background-position

css 样式。

$('.pieces > .white').append('<div class="white wKnight wK" style="width: 130px; height: 130px"></div>');
$('.wK').css({'background-image': 'url(https://i.stack.imgur.com/2OXx4.png)', 'background-position': '390px 0px'});
$('.pieces > .black').append('<div class="black bKnight bK" style="width: 130px; height: 130px"></div>');
$('.bK').css({'background-image': 'url(https://i.stack.imgur.com/2OXx4.png)', 'background-position': '390px 130px'})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pieces">
  <div class="white"></div>
  <div class="black"></div>
</div>