CSS“后备图像”
因此，如果你有这样的代码：
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”是否会被下载，或者是否会应用与“后备”图像相同的规则？
So if you have code like this:
background: url('image.png');
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
Your browser will use the gradient if it is webkit, but if it isn't, it will fallback and use the image. If you are using webkit, the image will just not even be downloaded. So if you had:
background: url('image1.png');
background: url('image2.png');
Would 'image1' be downloaded at all or do the same rules as the 'fallback' image apply?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Chrome（在 v9.x 上测试）将仅下载第二个图像。请参阅此示例页面上的开发人员工具
Chrome (tested on v9.x) will only download the second image. See Developer Tools on this sample page
同样的规则适用 - 发生的事情（粗略地）是 webkit 读取第二条规则，认识到它替换了第一条规则并执行了此操作，然后很久以后在使用它们时实际上对它们做了一些事情，但在那之前它只是一个值。对于非 webkit 浏览器，第二条规则看起来像垃圾，因此它们会跳过它，从而使第一条规则仍然存在，这就是为什么它有效地作为后备（即使后退会更正确）。
这对于所有浏览器来说并不相同 - 尽管所有浏览器都只应用一条规则 IIRC IE6<使用了第一条规则，并且围绕该“功能”有一些老派的技巧。
The same rules apply - what's happening (crudely) is that webkit reads the second rule, recognises it replaces the first and does so, and then much later actually does something with them when they're used, but it's just a value until then. For non-webkit browsers the second rule looks like garbage so they skip it which leaves the first rule still there, which is why it effectively works as a fallback (even though fall forward would be more correct).
This is not the same for all browsers - although all will apply only one rule IIRC IE6< used the first rule and there were some old school hacks around that "feature".