pero - texto opaco sobre fondo semitransparente con css
¿Cuál es superior, transparencia CSS o PNG Transparencia? (5)
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.
¿Debo usar transparencia PNG o transparencia CSS?
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.
¿Hay 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 donde podrías usar cualquiera de las dos cosas para el mismo efecto.
Por supuesto, hay colores RGBA en 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.
PD. No puedo decir que me he encontrado con problemas de rendimiento de FF3 alpha PNG.
Seguimiento para comentar:
DE ACUERDO. 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.
Acabo de hacer una prueba rápida no científica en Firefox 3.0.11 en el mac.
Mi prueba fue superponer un div y avanzar y retroceder varias veces.
Uno usó css:
background: #000; opacity:0.8;
El otro usó un PNG de 10px 24bit del mismo.
Medí los siguientes resultados con el monitor de actividad (así que adivinar, no es exacto)
Firefox 3.0.11
Opacidad de CSS: aproximadamente 60% de uso de la CPU.
PNG: aproximadamente 20% de uso de la CPU.
Safari 4.0:
Opacidad de CSS: aproximadamente 80% (¡con picos de 120%!)
PNG: aproximadamente 76% (sin picos en absoluto)
Por lo que respecta al rendimiento, parece que un PNG es el ganador.
Aunque CSS es probablemente la manera "adecuada" 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
Utilicé pngs con algunos jquery para deslizar un poco de texto y el script está muy lento. Eliminé png de fondo y el script está bien.