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

Question

因此，对于我的网站主机，我尝试添加精灵，因为我有超过25张图片，谷歌页面速度受到了投诉。我解决了我的精神不显示的问题，但我不知道为什么。为什么你必须在每个精灵中加载图像，以浪费带宽并降低页面速度？

.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添加为代码片段。