css - 响应式 Sprite 背景图片，如何

Question

您好，我在一个容器中有两列内容，第一列是文本，第二列是带有背景 Sprite 图像的 span。问题是当我使用较小的屏幕分辨率时，我希望背景 Sprite 图像的宽度百分比能够与 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-大小属性。

来自 MDN :

The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.

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

你还应该阅读这个:

• Scaling background images

我玩过这个 on JSFIddle .调整浏览器大小以查看效果。