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