html - 部分图像作为背景

Question

我有一张 Sprite 表，里面有几张图片。

我想显示其中一张图片(在 sprite 表内某处)作为我的 div 元素的背景。但是，我想在 sprite 周围留出一些空间，因此必须以某种方式将其从 sprite 表中剪掉。

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

Answer 1

假设在 div 中填充没问题，您可以使用 background-clip: content-box。然后，将填充添加到 div 等于您想要的间距量。 background-clip 将阻止背景图像出现在填充空间中。

下面是一个例子:

.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 位置的计算中考虑填充。在我的示例中， Sprite 实际上位于 (32, 160)，但我需要减去 (20, 20) 作为填充。