具有响应尺寸的图标的精灵，例如“背景大小:包含”;`

我有一个具有很多图标的应用程序。我知道，将精灵用于这些图标是正确的方法，而不是拥有多个小图像。但是，我需要这些图标与容器（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; ） - I.E按钮大
（使用background-size: contain; ） - 整个精灵都被显示给容器！

是否有一种方法可以使用响应灵敏的精灵，该精灵可以显示图标（使用background-position ）并制作该图标100％宽度和容器高度？

没有魔术解决方案可悲。您将必须手动调整背景本身的大小。

#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，然后在多个并发请求中您的问题绝对为零。

相关内容

最新更新

热门标签：