html - 宽度为 % 的 div 中的 Css sprite？

Question

是否可以在 div 中使用 width % 的 Css sprite 图像？

现在我尝试了这个但不起作用:

.sprite-gloss-vulc {
    background-image: url("/images/sprite-img.png");
}

.sprite-gloss-vulc-anello { 
  background-position: -1px -0px; 
  width: 120px; 
  height: 120px; 
}

#flex {
 width: 17%;
}

img {
  width: 120px; 
  height: 120px; 
}


<div id="flex">
    <img src="/images/transparent.gif" class="sprite-gloss-vulc sprite-gloss-vulc-anello">
</div>

当 div parent 的宽度大于 120px (width img) 时有效，但如果我调整页面大小，css sprite 将被“剪切”。 被剪掉是因为 div 的新闻宽度变小了，但是大小 .sprite-gloss-vulc-anello 它们仍然是一样的。

我希望你能原谅我的英语并帮助我...... 非常感谢!

Answer 1

你给 img 标签和类 height width 和 twice

.sprite-gloss-vulc {
    background-image: url("/images/sprite-img.png");
}

.sprite-gloss-vulc-anello { 
  background-position: -1px -0px; 
  width: 100%; 
  height: 100%; 
}

#flex {
 width: 100%;
}