CSS“回退图像”

Question

如果你有这样的代码：

background: url('image.png');
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

如果您的浏览器是webkit，它将使用渐变效果，但如果不是，它将退而求其次并使用图像。如果您正在使用webkit，则图像甚至不会被下载。因此，如果您有：

background: url('image1.png');
background: url('image2.png');

"image1"会被下载吗？还是与“fallback”图像相同的规则适用？"

- user372743

---

Paddy所说的 += (firebug || fiddler) - annakata

实际上，你的问题是询问第二张图片是否会被下载，这从屏幕上就很明显了... - Paddy

Answer 1

Chrome浏览器（测试版本为v9.x）仅会下载第二张图片。请在示例页面上使用开发者工具查看。

- Harmen

Answer 2

相同的规则适用-简单地说，WebKit读取第二个规则，识别它替换第一个规则并执行，然后在使用它们时（直到那时仅为值），再做一些操作。对于非WebKit浏览器，第二个规则看起来像垃圾，因此它们跳过它，这样第一个规则仍然存在，这就是为什么它有效地作为回退（即使"向前跳"可能更正确）。但并非所有浏览器都是如此-尽管所有浏览器只应用一个规则，但据我所知，IE6<使用第一个规则，并且围绕该“功能”有一些老派技巧。

- annakata