html - 用作背景的 spritesheet 图像填充容器

Question

我正在尝试从 spritesheet 中选择背景图像的一部分，填充其容器中的整个空间。

在这支笔中，背景图像应始终填充字符。也在调整大小时，这是主要问题。 https://codepen.io/timsim/pen/wdWZWv

如果你使用 background-position，你不知道图像应该有多大，只是在哪里剪切它。此外，设置高度和宽度假定它需要以高度和宽度的尺寸切割该图像。

#image{
    background-repeat: no-repeat;
    background: url(../assets/spritesheet.jpg);
    background-position: -220px -220px;
    width: 90%;
    height: 90%;
}

Answer 1

您想根据容器的大小和要使用的 Sprite 部分来使用 background-size。

#image {
    width: 10%;
    padding-bottom: 10%;
    background-color: red;
    background-image: url(https://cdn.codeandweb.com/blog/2016/05/10/how-to-create-a-sprite-sheet/spritestrip.png);
    background-size: 650%;
    background-position: 21% 146%;
    background-repeat: no-repeat;
}

<div id="container">
  <div id=image></div>
</div>