响应精灵背景图片,如何

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,但如果你有很多图像,或者你真的想这样做,你可以使用background-size属性.

来自MDN:

background-size 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，所以请记住这一点。

\n\n

我发现的技巧是使用背景位置的组合（使用精灵图像的百分比\xe2\x80\x94\xe2\x80\x94，如前所述）、填充顶部（再次使用百分比\xe2\x80\x94，这是精灵图像总宽度的百分比）和背景大小：覆盖。

\n\n

在jsfiddle上尝试一下。

\n\n

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

\n