覆盖CSS背景图像样式 - 两个图像都加载？

Question

如果我有2个CSS样式将背景图像分配给一个元素，并且一个样式覆盖另一个样式。这两个图像是由浏览器下载还是只是压倒性的？

我之所以问我是最近出席了一个关于移动设备条件样式表的研讨会。如果我用较小的覆盖我的正常BG图像以节省带宽，无论如何将加载较大的图像？这似乎是这个家伙说的，但对我来说，这似乎很奇怪。

Answer 1

似乎在某些情况下，答案是肯定的：

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.cloudfour.com/examples/mediaqueries/image-test/#t4

在开发者工具

Answer 2

您是否可以不做实验并查看Web日志文件以查看发生了什么？

否则为什么没有一点PHP来选择适当的样式表取决于设备。

Answer 3

重写的图像将不会被加载。

只要是明确的，例如：http://jsfiddle.net/thirtydot/MjKfG/1/show/

<div id="test">test</div> 

div { 
    background: url(http://dummyimage.com/600x400/000/fff) 
} 
#test { 
    background: url(http://dummyimage.com/200); 
    width: 200px; 
    height: 200px 
} 

只有http://dummyimage.com/200将被载入。

至少在Chrome，Safari，Firefox，IE8/9，Opera中都是如此。

我想猜想在所有浏览器中都是如此，因为它是一种简单而有效的优化。

Answer 4

答案是否定的。第一个被覆盖不会加载背景属性。为什么？由于浏览器在加载任何其他资源之前首先加载您的css文件。他们首先处理css文件，然后根据顺序和覆盖顺序开始加载图像。

例如：

div { 
    border: solid 1px #000000; 
    background: url('images/sprites.png') no-repeat x y; 
} 

.mobile div { 
    border: solid 1px #000000; 
    background: url('images/sprites_mobile.png') no-repeat x y; 
} 

浏览器将处理这个C​​SS为您的手机变成这个样子：

div { 
    border: solid 1px #000000; 
    background: url('images/sprites_mobile.png') no-repeat x y; 
} 

而现在，浏览器已经忽略了sprites_mobile.png加载。