html - 用作超链接的自适应CSS Sprite不会调整大小

Question

好的，我搜索了Internet和stackoverflow，但是我仍然眼花azz乱。

我目前正在为我和我的家人建立一个个人起始页（当您打开Web浏览器时，它将在此页上开始）。大多数东西都可以正常工作了，我开始使用CSS精灵，因为我确实想降低负载。现在起初，我开始使用几种不同的精灵，并根据@media规则使用的分辨率来隐藏它们。

然后我开始思考；我仍然会浪费带宽并增加下载时间，因为它仍然会加载3种不同的精灵（用于3种不同的分辨率）。因此，我搜索了Google，发现可以创建称为“响应式CSS精灵”或类似名称的东西。但是，这是我遇到的问题。

我使用了以下生成器：http://responsive-css.spritegen.com

调整了一点输出并将其放在我的网站上。尽管图像（=精灵）确实显示，可以单击并且也可以悬停/激活这两个功能，但是由于某种原因它根本不调整它们的大小。我真的不知道我在做什么错。也许有人可以向我解释我应该做什么或我做错了什么。

以下是我当前正在使用的部分编码（html和css）。

CSS部分：

.router, .diskstation, .sabnzbd, .couchpotato, .sickbeard, .vanderlingen, .neverlands, .linkplanet, .dszl{ max-width: 100%; background-size: 500%; background-image: url('../../../img/knoppen/navigatie-knoppen.hr.png'); }

.router { background-position: 0 88.461538%; background-size: 138.709677%; }
.router:hover { background-position: 0 84.615385%; background-size: 138.709677%; }
.router:active { background-position: 0 80.769231%; background-size: 138.709677%; }
.diskstation { background-position: 0 30.769231%; background-size: 108.860759%; }
.diskstation:hover { background-position: 0 26.923077%; background-size: 108.860759%; }
.diskstation:active { background-position: 0 23.076923%; background-size: 108.860759%; }
.sabnzbd { background-position: 0 76.923077%; background-size: 130.30303%; }
.sabnzbd:hover { background-position: 0 73.076923%; background-size: 130.30303%; }
.sabnzbd:active { background-position: 0 69.230769%; background-size: 130.30303%; }
.couchpotato { background-position: 0 19.230769%; background-size: 101.176471%; }
.couchpotato:hover { background-position: 0 15.384615%; background-size: 101.176471%; }
.couchpotato:active { background-position: 0 11.538462%; background-size: 101.176471%; }
.sickbeard { background-position: 0 65.384615%; background-size: 117.808219%; }
.sickbeard:hover { background-position: 0 61.538462%; background-size: 117.808219%; }
.sickbeard:active { background-position: 0 57.692308%; background-size: 117.808219%; }

这只是我使用的CSS Sprite的一小部分，但是您明白了。
另外，这是我从生成器中获得的代码，至少其中大部分是这样。 :)

这是HTML部分：

<a href="router.php"><img class="router" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAABDAQMAAABk/POFAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjAK6AQAEcwABmWJweQAAAABJRU5ErkJggg=="></a>
<a href="diskstation.php"><img class="diskstation" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4AAABDAQMAAABX6y7JAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABRJREFUeNpjYBgFo2AUjIJRMAAAAAV/AAHDdSA9AAAAAElFTkSuQmCC"></a>
<a href="sabnzbd.php"><img class="sabnzbd" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAABDAQMAAABnZz/oAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjIKhBAAEtgABaCn4jwAAAABJRU5ErkJggg=="></a>
<a href="couchpotato.php"><img class="couchpotato" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAABDAQMAAAA28wyLAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABRJREFUeNpjYBgFo2AUjIJRMGIBAAYFAAFf0+w8AAAAAElFTkSuQmCC"></a>
<a href="sickbeard.php"><img class="sickbeard" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJIAAABDAQMAAABN185HAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABRJREFUeNpjYBgFo2AUjIJRQCoAAAU8AAF2NOTmAAAAAElFTkSuQmCC"></a>

正如刚才提到的;图像（=精灵）正确显示并且可以单击；甚至：hover和：active都可以​​，但是当我调整窗口大小时，它只是不能缩放它们？

为了澄清我在这里要实现的目标；我只希望图像以较低的分辨率调整大小。例如，如果我父亲使用该网站，则应缩小图像，如果我在家中使用该网站，则不应调整大小（并保持其原始值）。

我不知道我的解释是否正确；英语不是我的母语，但我认为我很清楚（如果我自己说的话）。

预先感谢大家的帮助和投入...！

//更新＃1

回应user3125923

您所说的实际上是有道理的，因此我将每个精灵放在一个名为sprite_class的类中。接下来，我将@media内容添加到CSS中，如下所示：

@media (min-width:2048px){
.sprite_class{width:90%;
}
}

@media (min-width:1301px) and (max-width:1983px){
.sprite_class{width:60%;
}
}

@media (max-width:1300px){
.sprite_class{width:30%;
}
}

但是，不幸的是，它们仍然没有调整大小。可能是我做错了，但是不知道是什么... :(

//更新＃2

这里取得了一些进展。而不是将它们调整为较小的图像，而是放大了精灵？！当我设置width：100％时，它将放大很多倍。我应该将每个div设置为最大像素数量吗？例如：max-width：128px

同时，我会尝试一下，看看是否可行，尽管我认为应该有一种更简单的方法。

//更新＃3

Pfft ...我放弃了。我不知道我在这里做什么。我目前只会使事情变得越来越糟。现在，我设法缩放到较低的分辨率，但是现在它们之间的图像之间有空白空间（认为这是由某处的宽度设置引起的），因此，即使缩小比例（取决于分辨率），它仍然会占用原始空间。非常非常累。特别是考虑到我已经忙了整整一天的时间了。此外，悬停/活动图像无法与原始图像正确对齐。对此感到厌倦.......！

我想我将只创建3个单独的Sprite集，并隐藏不使用的Sprite集。当然，这会增加负载，但至少我知道这可行。对于了解所有这些的人来说很有趣，但是...

//更新＃4

正如更新4中提到的那样，我已经花了很多时间在这上面。没有任何效果（可能是我的错，但仍然非常非常烦人）。因此，我创建了3个单独的精灵图像，现在仅根据所使用的分辨率加载正确的图像。问题解决了。花了我不到3分钟的时间。这比“按正确的方式做”给我带来的头痛要好。

我将在一天左右的时间内回来查看，看是否有人发布了可行的解决方案，而不是我在上一段中描述的解决方案...

Answer 1

您可以像使用媒体查询之前一样添加精灵，无需加载3张图像，只需根据屏幕尺寸缩小一个精灵即可。就像是：

@media screen (min-width 767px) {
 .sprite_class {
  width: 100%;
}
}

@media screen (max-width 768px) {
 .sprite_class {
  width: 70%;
}
}

等等。