Question

我想在div中使用精灵图像，我在同一个地方使用多个img标签显示同一精灵的不同部分（假设精灵是透明的png图像）。我使用在线精灵生成器生成响应精灵与css文件。

以下是我所得到的：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; 
}

问题在于它没有显示任何内容，我希望精灵根据包含它的图像的宽度来改变它的大小。

编辑1：精灵图像用作示例

Answer 1

您没有在代码中添加图片高度;

请找到更新小提琴link

<强> HTML

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

<强> CSS

.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;
    float: left;
}

.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; 
    width:400px;
    height: 400px;
}

Answer 2

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

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

请参阅updated fiddle

div中的精灵没有显示

2 个答案: