图像作为背景的部分

Question

我有一个精灵表，里面有几张图像。

我想在我的div元素的背景下显示这些图像之一（在精灵表中的某处）。但是，我想在Sprite周围留一些空间，因此必须以某种方式将其从Sprite工作表中剪切掉。

我想要一个理想情况下仅使用CSS的解决方案。

Answer 1

假设div中有填充是可以的，则可以使用background-clip: content-box。然后，在div中添加等于所需间距的填充。背景剪辑将防止背景图像出现在填充空间中。

下面是一个示例：

.sprite {
  background-image: url('https://www.vg-resource.com/attachment.php?aid=7093');
  background-repeat: no-repeat;
  background-position: -12px -140px;
  background-clip: content-box;
  padding: 20px;
  width: 32px;
  height: 40px;
  border: 1px solid black;
}

<div class="sprite"></div>

请注意，您将需要在计算中考虑填充，以确定Sprite的位置。在我的示例中，精灵实际上位于（32，160），但是我需要减去（20，20）作为填充。