Css 响应精灵背景图像，如何

嗨，我在一个容器中有两列内容，第一列是文本，第二列是带有背景精灵图像的跨距。问题是，当我使用更小的屏幕分辨率时，我希望背景精灵图像具有百分比宽度，以便能够与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>

h5{
浮动：左；
显示：块；
宽度：800px；
}
雪碧先生{
背景图片：url（“assets/img/website_sprite_a.png”）；
背景位置：-60px-60px；
浮动：左；
显示：块；
宽度：64px；
}
标题

在您的情况下，我会选择单个

背景图像

，但是如果您有很多图像，或者您确实想这样做，则可以使用背景大小属性

发件人：

背景大小CSS属性指定背景图像的大小。图像的大小可以完全约束，也可以仅部分约束，以保持其固有比率

您还应该阅读以下内容：

---

我玩了一点这个。调整浏览器大小以查看效果。

晚了将近一年，但我试图找出相同的问题，但无法找到直接的答案。在我胡闹了几句之后，我终于明白了。还没有机会在IE8上测试它，也不再为IE6/7烦恼，所以请记住这一点

我发现的技巧是结合使用背景位置（使用前面提到的精灵图像的百分比）、填充顶部（同样，使用百分比这是精灵图像总宽度的百分比）和背景大小：cover

在家里玩

#包装器{
位置：相对位置；
宽度：100%；
}
.分区{
位置：绝对位置；
排名：0；
左：0；
背景图像：url（'http://upload.wikimedia.org/wikipedia/en/2/2e/Sprite_logo.jpg');
背景重复：无重复；
背景位置：0%0%；
背景尺寸：封面；
填充：50%0；
宽度：40%；
}

最好不要为此使用精灵。只需使用一个独立的图像。这里有一篇关于如何做到这一点的好文章：谢谢，我同意，但当我把背景大小：100%；精灵看起来很小，我不想给精灵一个固定的宽度。@user1937021请提供一个JSFIDLE和您的代码，看看到底发生了什么，您将得到更多的帮助（包括我）

.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
}

#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>