С несколькими фоновыми изображениями, определенными в классе 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%);
}

Я знаю, что градиент будет показан и .png переопределен, если я использую Firefox. Но браузер все еще загрузит .png? А как насчет других браузеров, их префиксов поставщиков и поведения?

Answer 1

Это действительно зависит от того, какой браузер вы используете.По большей части современные браузеры, такие как Chrome, не загружают файлы, пока не прочитают все CSS-утверждения, в которые я верю.Поскольку вы указали два фоновых "изображения", на самом деле PNG не будет загружаться, потому что это заявление перезаписано.

Однако я бы посоветовал против этого, поскольку все еще есть много пользователей, использующих старые версии.браузеров, и я не могу гарантировать, как эти браузеры будут работать в этой ситуации.