响应式精灵背景图片，如何

Question

嗨，我在一个容器中有两列内容，第一列有文本，第二列是带有背景精灵图像的范围。问题是当我达到较小的屏幕分辨率时，我希望背景精灵图像具有百分比宽度，以便能够将其与具有百分比宽度的 H5 一起缩放，有没有办法做到这一点？

h5{
    float:left;
    display:block;
    width:800px;
}
.sprite{
    background-image: url("assets/img/website_sprite_a.png");
    background-position: -60px -60px;
    float:left;
    display:block;
    width:64px;
}
<div class="container">
 <h5>Title
 </h5>
 <span class="sprite">
 </span>
</div>

Answer 1

在您的情况下，我会使用单个background-image，但是如果您有很多图像，或者您真的想这样做，则可以使用背景大小属性。

来自 MDN：

背景大小 CSS 属性指定背景图像的大小。图像的大小可以完全约束或仅部分限制，以保持其内在比率。

.sprite{
    background-image: url("assets/img/website_sprite_a.png");
    background-position: -30% -30%; //use % instead pixels
    float:left;
    display:block;
    width:64px;
    background-size: 100%; //play with this
}

您还应该阅读以下内容：

• 缩放背景图像

我在JSFIddle上玩过一些。调整浏览器大小以查看效果。

Answer 2

晚了将近一年，但我试图弄清楚同样的事情，但无法提出或找到直接答案。在对多条建议进行了一些鬼混之后，我想通了。还没有机会在IE8上测试它，并且不再打扰IE6/7，所以请记住这一点。

我发现的技巧是使用背景位置（使用前面提到的精灵图像的百分比）、填充顶部（再次使用百分比——这是精灵图像总宽度的百分比）和背景大小的组合：覆盖。

在jsfiddle玩它。

#wrapper {
    position: relative;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('http://upload.wikimedia.org/wikipedia/en/2/2e/Sprite_logo.jpg');
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: cover;
    padding: 50% 0 0 0;
    width: 40%;
}
<div id="wrapper">
    <div class="div"></div>
</div>