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

Question

我正在尝试使从 spritesheet 中获取的背景图像的选定部分填充其容器中的整个空间。

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

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

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

Answer 1

您想根据容器的大小和要使用的精灵部分来使用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>