为什么精灵不适用于一般背景？

Question

所以对于我的网站 hostup 我尝试添加精灵，因为我有超过 25 张图像并且 google pagespeed 抱怨。我解决了我的 sprire 不显示问题，但我不确定为什么。为什么你必须在每个精灵中加载图像，浪费带宽并降低页面速度？

.sprite {
    background-image: url(../img/spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-backup_icon {
    width: 60px;
    height: 60px;
    background-position: -5px -5px;
}

.sprite-cpanel_icon {
    width: 60px;
    height: 60px;
    background-position: -75px -5px;
}



.sprite {
    background-image: url(../img/spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-backup_icon {
    width: 60px;
    height: 60px;
 background: url(../img/spritesheet.png);
    background-position: -5px -5px;
}

.sprite-cpanel_icon {
    width: 60px;
    height: 60px;
 background: url(../img/spritesheet.png);
    background-position: -75px -5px;
}

html代码

<div class="sprite-backup_icon"></div>

所以第二个。工作得很好，但是第一个。不显示任何图像，只是一个具有定义的宽度和高度的空白图像，这是为什么？

Answer 1

回答你的第一个问题：

如果浏览器在样式 Sheet 中找到图像，它将下载它，然后将其存储在您的浏览器缓存中。下一次同一图像 found/requested 在样式 Sheet 中来自相同 URL （即使在相同的初始页面加载期间），它将从缓存中提供。没有重新下载。因此，虽然您的样式 Sheet 中可能有 spritesheet.png 3 次，但它只下载了一次，不会浪费带宽或页面加载速度。

正是由于这种缓存功能，精灵在提供图标和其他较小图像等内容时受到青睐。

关于为什么你的第一个 CSS 示例不起作用的第二个问题，它可能是任何数量的问题，从一个简单的拼写错误，或者你想要使用没有 [=11= 的精灵的所有元素] class。

为了正确地帮助您解决这个问题，我们需要查看您的 HTML 以及发布的 CSS。请编辑您的问题并将您的 HTML 添加为代码段。

为什么精灵不适用于一般背景？

why do sprites not work with a general background?

css

html

styles

css-sprites