为什么精灵不能在一般背景下工作？

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

回答你的第一个问题：

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

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

---

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

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