¿Debo usar transparencia PNG o transparencia CSS?¿Qué es superior, transparencia CSS o transparencia PNG?
Mi primer instinto es ir con CSS. Sin embargo, escuché en alguna parte que el filtro en IE es lento y que obtendría mejores resultados con PNG (ignorando IE6).
Sin embargo, por experiencia personal, sé que la transparencia de PNG es lenta en FF3.
¿Existe una respuesta definitiva a esto?
Gracias.
Son dos soluciones diferentes para dos problemas diferentes. La transparencia de CSS (supongo que se refiere a la propiedad de opacidad) hará que un elemento completo (su borde, fondo y contenido) sea transparente, mientras que la transparencia PNG alfa solo es útil en situaciones donde usaría imágenes, por ejemplo, un fondo de elementos .
No puedo pensar en muchas situaciones en las que podría utilizar cualquiera de los dos con el mismo efecto.
Por supuesto, RGBA colours in CSS3, sin embargo, el soporte del navegador es actualmente demasiado bajo para que sea una opción viable en sitios/aplicaciones de cara al público.
P.S. No puedo decir que me he encontrado con problemas de rendimiento de FF3 alpha PNG.
Seguimiento de comentario:
OK. En ese caso, elegiría la propiedad de opacidad de CSS.
Aunque el rendimiento de los filtros puede no ser óptimo en IE6, significa que no tiene que perder ancho de banda y una solicitud HTTP adicional en una imagen. Además, si quisieras que la imagen funcione en IE6 también tendrías que usar AlphaImageLoader, que estoy seguro sería tan lento (si no más lento) que el filtro alfa.
Estoy colocando una superposición transparente en algunos elementos, y en este caso establecer la imagen de fondo del elemento de superposición o la configuración de opacidad funcionará. Mi pregunta se refiere a la velocidad de cualquiera de las soluciones en la mayoría de los navegadores. Gracias. –
Respuesta en respuesta (era demasiado larga). –
La velocidad a la que me refiero es velocidad de renderizado, no velocidad de carga, que en mi situación es mucho menos importante. Cuando se desplaza o muestra (IE, usando JS para ocultar/mostrar), ¿es cierto que PNG funciona mejor que el filtro de opacidad en IE7? Si tuviera que hacerlo, usaría un CSS diferente para la clase para IE/FF. –
La transparencia PNG puede hacer cosas que CSS no puede: la transparencia del canal alfa PNG puede tener diferentes grados de transparencia parcial para diferentes partes de la imagen, mientras que la opacidad CSS no puede hacer eso.
Bueno ... usted * podría * usar degradados de CSS (posiblemente junto a '-webkit-mask') –
Acabo de hacer una prueba rápida no científica en Firefox 3.0.11 en el mac.
Mi prueba consistía en superponer un div y avanzar y retroceder varias veces.
Uno CSS empleado:
background: #000; opacity:0.8;
El otro 24 bits utilizado un 10px PNG de la misma.
Medí los siguientes resultados con Monitor de actividad (por lo que una suposición, no exacta)
Firefox 3.0.11
CSS opacidad: aproximadamente el 60% de uso de CPU.
PNG: aproximadamente 20% de uso de la CPU.
Safari 4.0:
CSS opacidad: aproximadamente el 80% (con picos de 120%!)
PNG: aproximadamente el 76% (sin picos en absoluto)
Así que en cuanto al rendimiento, parece un PNG es el ganador.
' Por lo que respecta al rendimiento, parece que un PNG es el ganador. En la Mac, al menos. ¿Has probado en Windows? – Moshe
Tal vez estoy respondiendo un poco tarde, pero creo que es bastante obvio, que el rendimiento será mejor con un png, si lo mides en la CPU. Pero creo que el principal problema de rendimiento es el tamaño de img. Como puedes proteger muchos Bytes usando .jpg, creo que es mejor usar opacity/rgba en la mayoría de los casos. – davedadizzel
Aunque CSS es probablemente la forma "correcta" de ir, creo que PNG es más seguro, más fácil y mejor implementado.
¡hay FUGAS DE MEMORIA en IE (incluyendo 8) cuando se usa png 24 bit! por favor ten cuidado
que utilizan archivos PNG con un poco de jQuery para deslizar algún texto y el guión está muerto lento! Eliminé png de fondo y el script está bien.
+1 para el enlace. – Moshe
Esta pregunta * realmente * necesita contexto. Y para hacer una pregunta específica. –