6

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

2 回答 2

5

在你的情况下，我会选择一个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 上玩了一点。调整浏览器大小以查看效果。

于 2013-01-23T10:01:20.593 回答
0

迟了将近一年，但我试图找出相同的答案，但无法想出或找到直接的答案。在与多条建议混在一起后，我想通了。还没有机会在 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>
于 2013-11-26T15:44:10.917 回答