Question

因此，对于我的网站hostup，我尝试添加图片，因为我的图片超过25张，并且Google Pagespeed抱怨。我解决了我的未显示问题，但不知道为什么。为什么必须在每个精灵中加载图像，以浪费带宽并减慢页面速度？

.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查找/请求相同的图像时（即使在相同的初始页面加载期间），也将从缓存中提供该图像。没有重新下载。因此，尽管您的样式表可能有spritesheet.png 3次，但它只下载了一次，而不会浪费带宽或页面加载速度。

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

关于第二个问题，为什么第一个CSS示例不起作用，可能是许多问题，包括简单的错字，或者是您想要使用精灵而不使用sprite类的所有元素。

为了正确地帮助您解决此问题，我们需要查看您的HTML和发布的CSS。请修改您的问题，然后将HTML添加为代码段。

为什么精灵在一般背景下不起作用？

1 个答案: