html - div 内的 Sprite 不显示

Question

我想在 div 中使用 sprite 图像，我在其中使用多个 img 标签在同一位置显示同一 sprite 的不同部分(假设 sprite 是透明的 png 图像)。我使用在线 sprite 生成器生成带有 css 文件的响应式 sprite。

这是我得到的:jsfiddle

这是代码本身:

<div id="jersey">
    <img style="position:absolute;width:131px;"class="custom-sprite custom-1">
    <img style="position:absolute;width:131px" class="custom-sprite custom-2">
    <img style="position:absolute;width:131px" class="custom-sprite custom-3">
</div>

.custom-sprite {
    max-width: 100%; background-size: 100%; 
    background:url(https://s-media-cache-ak0.pinimg.com/originals/44/1f/71/441f7163417c68b66183a46d94451ba0.jpg) no-repeat;
}

.custom-sprite {
    max-width: 100%; background-size: 100%; 
    background:url(https://s-media-cache-ak0.pinimg.com/originals/44/1f/71/441f7163417c68b66183a46d94451ba0.jpg) no-repeat;
}

.custom-1 { 
    background-position: 0 0%;
    background-size: 100%; 
}
.custom-2 { 
    background-position: 0 64.606181%;
    background-size: 100%; 
}
.custom-3 {
    background-position: 0 1.595214%;
    background-size: 100%;
}

#jersey {
    position: absolute;
    top: 0px;
    left: 0px; 
}

问题是它没有显示任何东西，我希望 Sprite 根据包含它的图像的宽度改变它的大小。

编辑 1:以 Sprite 图像为例

Answer 1

首先要指出的是，你应该在使用 Sprite 时使用 div 或 span 元素，而不是图像，因为你没有显示图像，但是而是为元素设置背景。

其次，您需要明确指定 Sprite 元素的高度和宽度。

请参阅updated fiddle