CSS 背景图片总是加载？

Question

我在 styles.css 中定义了一个类:

.caquote {background: url("http://cdn.domain.com/images/quotebig.png") no-repeat 10px 8px ;}

如果在 html 页面上我没有在任何地方定义 .caquote，图像是否仍会被现代浏览器加载？

Answer 1

只有在 HTML 中使用时才会下载 css 图像:我在 jsfiddle 中为你做了一个例子:http://jsfiddle.net/b3QXu/如您所见，仅当您将鼠标悬停在 div 上时才会加载第二张图片。如果您不悬停 div，您的计算机将不会下载图像。

#bonjour {
background-image : url(http://rosalienebacchus.files.wordpress.com/2012/04/planet-earth-from-space.jpg);
width : 500px;
height : 500px;
background-color : #123456;
background-size : cover;
}

#bonjour:hover {
    background-image : url(http://www.desktopas.com/files/2013/06/Outer-Space-Moon-    Earth-Spaceman.jpg);
}

供您引用:HTML 文件中的所有图像都会被加载，即使它们在 css 上设置为显示:无也是如此。