css - 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”还是应用与“后备”图像相同的规则？

Answer 1

Chrome（在 v9.x 上测试）只会下载第二个图像。请参阅此示例页面上的开发人员工具

Answer 2

同样的规则适用 - 正在发生的事情（粗略地）是 webkit 读取第二条规则，识别它替换第一个规则并这样做，然后在使用它们时实际上对它们做了一些事情，但在那之前它只是一个值。对于非 webkit 浏览器，第二条规则看起来像垃圾，所以他们跳过了它，这使得第一条规则仍然存在，这就是它有效地作为后备工作的原因（尽管前退会更正确）。

对于所有浏览器来说，这并不相同——尽管所有浏览器都只会应用一条规则 IIRC IE6< 使用了第一条规则，并且围绕该“功能”有一些老派的黑客攻击。