Browser 浏览器图像下载行为

在我在这里看到的一个问题中，有人问如何在刷新页面时更改背景，而不使用任何服务器端技术。一个答案是把它变成css

.backgr0 { background-image: url('images/somepic.jpg'); }
.backgr1 { background-image: url('images/somepic.jpg'); }
.backgr2 { background-image: url('images/somepic.jpg'); }
.backgr3 { background-image: url('images/somepic.jpg'); }
.backgr4 { background-image: url('images/somepic.jpg'); }

然后在元素中添加一个随机类

---

但我想知道的是，当浏览器遇到这种css时，它会继续下载所有这些图像吗？因为在这种情况下，您实际上增加了HTTP请求的数量。

一如既往，最好的确定方法是测试它

您会发现，浏览器仅在与CSS匹配的情况下加载文件。 （至少这是Firefox、Chrome和IE的表现）

例如，如果您有此元素，但没有

id=“foo”

元素，浏览器将不会加载它

#foo{
  background-image:url('some.png');
}