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：

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
}

您还应该阅读：

Scaling background images

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

Answer 2

将近一年的时间已经太迟了，但我试图找出相同的结果并且无法想出或找到直接答案。经过多次劝告后，我想出来了。还没有机会在IE8上测试这个，并且停止了对IE6 / 7的困扰，所以请记住这一点。

我找到的技巧是使用背景位置的组合（使用精灵图像的百分比 - 如前所述），填充顶部（再次，使用百分比 - 这是精灵总宽度的百分比image）和background-size：cover。

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

响应精灵背景图片，如何

2 个答案: