Question

我有一个有很多图标的应用。我知道使用精灵这些图标是正确的方法，而不是拥有多个小图像。但是，我需要这些图标与容器（background-size: contain;）的大小相同，因此我被迫为每个图标使用多个图像：

.icon1 {
  background-image: url('../my-site/icon1.gif');
  background-size: contain;
}

.icon2 {
  background-image: url('../my-site/icon2.gif');
  background-size: contain;
}
. . . and so on...

然而，使用精灵会导致：

（没有background-size: contain; ） - 当按钮很大时，图像太小了
（使用background-size: contain; ） - 整个精灵正在向容器展示！

有没有办法使用响应精灵来显示图标（使用background-position ）并将该图标设为100％宽度和高度的容器？

Answer 1

没有神奇的解决方案可以实现这一点。您必须手动调整背景本身的大小。

#home {
    width: 46px;
    height: 44px;
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url(https://i.imgur.com/1ijjJJU.gif) -91px 0;
}

#home-double {
    width: 92px;
    height: 88px;
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0;
    background-size: 268px;
}

#next-double {
    width: 86px;
    height: 88px;
    background: url(https://i.imgur.com/1ijjJJU.gif) -182px 0;
    background-size: 268px;
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<p>Normal size</p>
<p><img id="home" src="img_trans.gif"></p>
<p><img id="next" src="img_trans.gif"></p>

<p>Double size</p>
<p><img id="home-double" src="img_trans.gif"></p>
<p><img id="next-double" src="img_trans.gif"></p>

</body>
</html>

请注意，通过更改背景大小，您还必须更改背景位置。

当然这是疯了，没有意义。

我最近停止使用sprite来支持SVG sprites。它们令人难以置信且更加灵活，让您可以做得更多。你可以改变它们的颜色和大小，在视网膜屏幕上播放。

如果您仍然喜欢PNG图标，我会说放弃精灵。即使采用适当的构建过程，维护它们也很困难。转到https和http2，那么多个并发请求绝对没有问题。

具有响应大小的图标的精灵，如`background-size：contains;`

1 个答案: