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%);
}
Sé que se mostrará el degradado y que se omitirá .png si utilizo Firefox. ¿Pero el navegador aún descargará el .png? ¿Qué pasa con otros navegadores, sus prefijos de proveedor y su comportamiento?Con múltiples imágenes de fondo definidas en una clase de CSS; ¿Los navegadores los descargan todos?
Esto realmente depende de qué navegador estés usando. En su mayor parte, los navegadores actualizados, como Chrome, no descargan los archivos hasta que hayan leído todas las declaraciones de CSS que creo. Debido a que declaró dos "imágenes" de fondo, en realidad no va a descargar el PNG porque la declaración se sobrescribe.
Sin embargo, desaconsejaría esto, porque todavía hay muchos usuarios usando versiones anteriores de navegadores, y no puedo garantizar cómo actuarán esos navegadores en esta situación.
parece que IE7, por ejemplo, descarga el archivo PNG e ignora las líneas prefijadas del proveedor. Así que no veo el problema haciendo esto, excepto que algunos navegadores de mierda podrían descargar el PNG y luego anularlo con el degradado. Lo que hace que el tiempo de carga extra. – hanktard
Puedo confirmar que Chrome no descarga la imagen: http://fiddle.jshell.net/TGWhJ/1/show/. – Blender
No sé de una lista definitiva, pero eche un vistazo a http://stackoverflow.com/questions/2104312/do-all-css-background-images-get-loaded-even-if-the-css- no se aplica Parece que puedes mirar el comportamiento de cada navegador con un proxy de depuración para averiguarlo con certeza. –
podrías comenzar a probar. Chrome y Opera tienen depuradores integrados donde puedes verificar los recursos descargados. firefox tiene firebug y IE tiene "F12" – Joseph