在CSS类中定义多个背景图像; 浏览器是否全部下载？

Question

body {
   background: url(image.png);
   background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
}

我知道如果我使用Firefox,将显示渐变并覆盖.png.但是浏览器还会下载.png吗？那么其他浏览器,它们的供应商前缀和行为呢？

Answer 1

这实际上取决于您使用的浏览器。大多数情况下，最新的浏览器（例如 Chrome）在阅读了我认为的所有 CSS 语句之前不会下载文件。因为您声明了两个背景“图像”，所以它实际上不会下载 PNG，因为该声明被覆盖。

但是，我建议不要这样做，因为仍然有很多用户使用旧版本的浏览器，并且我无法保证这些浏览器在这种情况下将如何运行。