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%);
}
So che il gradiente verrà visualizzato e il file .png verrà ignorato se utilizzo Firefox. Ma il browser continuerà a scaricare il file .png? Che dire degli altri browser, dei loro prefissi e dei loro comportamenti?Con più immagini di sfondo definite in una classe CSS; I browser li scaricano tutti?
Questo dipende molto dal browser utilizzato. Per la maggior parte, i browser aggiornati, come Chrome, non scaricano i file finché non hanno letto tutte le dichiarazioni CSS che ritengo. Poiché hai dichiarato due "immagini" di sfondo, in realtà non scaricherà il file PNG perché l'istruzione viene sovrascritta.
Tuttavia, vorrei sconsigliarlo, perché ci sono ancora molti utenti là fuori che usano vecchie versioni di browser e non posso garantire come quei browser agiranno in questa situazione.
sembra come IE7 per esempio scarica il PNG e ignora le linee con prefisso del venditore. Quindi non vedo il problema a fare questo eccetto per il fatto che alcuni browser scadenti potrebbero scaricare il PNG e quindi sovrascriverlo con il gradiente. Il che rende il tempo di carico extra. – hanktard
Posso confermare che Chrome non scarica l'immagine: http://fiddle.jshell.net/TGWhJ/1/show/. – Blender
Non conosco un elenco definitivo, ma date un'occhiata a http://stackoverflow.com/questions/2104312/do-all-css-background-images-get-loaded-even-if-the-css- isnt-applicata. Sembra che tu possa solo guardare il comportamento di ogni browser con un proxy di debug per scoprirlo di sicuro. –
potresti iniziare a testare. chrome e opera hanno integrato i debugger in cui è possibile controllare le risorse scaricate. firefox ha firebug e IE ha "F12" – Joseph