用作背景的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。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;