简体   繁体   English

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

[英]Overriding CSS background image styles - both images are loaded?

If I have 2 CSS styles that assign background images to an element, and one style overrides the other. 如果我有2个CSS样式将背景图像分配给元素,而一个样式覆盖另一个样式。 Will both images be downloaded by the browser or just the overriding one? 这两个图像都可以通过浏览器下载还是仅覆盖一个?

I reason I'm asking is I recently attended a workshop on conditional stylesheets for mobile devices. 我之所以问我最近是否参加了有关移动设备条件样式表的研讨会。 If I override my normal bg images with smaller ones to save bandwidth, will the larger images be loaded anyway? 如果我用较小的图像覆盖我的普通bg图像以节省带宽,那么是否会加载较大的图像? This seemed to be what the guy was saying but it seems strange to me it would work this way. 这似乎就是那个家伙所说的,但对我来说这似乎很奇怪。

The overridden image will not be loaded. 被覆盖的图像将不会被加载。

Just to be clear, for example: http://jsfiddle.net/thirtydot/MjKfG/1/show/ 为了清楚起见 ,例如: 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
}

Only http://dummyimage.com/200 will be loaded. 只会加载http://dummyimage.com/200

This is true in at least Chrome, Safari, Firefox, IE8/9, Opera. 至少Chrome,Safari,Firefox,IE8 / 9,Opera都是如此。

I'd guess it's true in all browsers, because it's a simple and effective optimization. 这在所有浏览器中都是如此,因为它是一种简单而有效的优化。

The answer is NO. 答案是不。 The first one was overridden won't load the background property. 第一个被覆盖的不会加载background属性。 Why? 为什么? Because browsers load your css file first before loading any other resources. 因为浏览器在加载任何其他资源之前首先加载您的css文件。 They handle css files first then start loading images based on order and overriding order. 他们首先处理css文件,然后根据订单和覆盖订单开始加载图像。

For example: 例如:

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;
}

Browsers will process this css for your mobile to become like this: 浏览器会为您的手机处理此css,如下所示:

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

And now, browsers already ignored the sprites_mobile.png for loading. 现在,浏览器已经忽略了sprites_mobile.png进行加载。

Can you not do an experiment and view the web log files to see what is happening? 你能不进行实验并查看网络日志文件,看看发生了什么?

Otherwise why not have a little PHP to select the appropriate style sheets depending on the device. 否则,为什么没有一点PHP来根据设备选择合适的样式表。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM