Question

如果我有2个CSS样式将背景图像分配给元素，而一个样式覆盖另一个样式。这两个图像都可以通过浏览器下载还是仅覆盖一个？

我之所以要问我最近是否参加了有关移动设备条件样式表的研讨会。如果我用较小的图像覆盖我的普通bg图像以节省带宽，那么是否会加载较大的图像？这似乎就是那个家伙所说的，但对我来说这似乎很奇怪。

Answer 1

将不会加载被覆盖的图像。

为了清楚起见，例如：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 2

答案是否定的。第一个被覆盖的不会加载background属性。为什么？因为浏览器在加载任何其他资源之前首先加载您的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;
}

浏览器会为您的移动设备处理此css：

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

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

Answer 3

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

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

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

Answer 4

你能不进行实验并查看网络日志文件，看看发生了什么？

否则，为什么没有一点PHP来根据设备选择合适的样式表。

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

4 个答案: