Hace unos meses me encontré con esta solución para implementar fondos con colores RGBA (CSS3), compatible con cualquier explorador (incluyendo internet explorer): Bulletproof, cross-browser RGBA backgrounds, today
Así funciona el script PHP: Genera una imágen PNG y la utiliza como imagen de fondo en los exploradores que no soportan RGBA. Es una solución realmente elegante, fácil de implementar y efectiva. El único problema que surge al usarla es la falta de soporte en IE6 para imágenes PNG con transparencias.
Ahora bien, para lidiar con el problema de las imágenes PNG en IE6 existen varias soluciones, la mayoría a manera de librerías javascript. Una de las más populares y reconocidas es DD_belatedPNG, la cual funciona muy bien en diversos escenarios. Sin embargo, al intentar utilizar esta librería con el script PHP, nos damos cuenta de que no funciona muy bien: Prueba No. 1
Modificando DD_belatedPNG
Revisando las limitaciones de DD_belatedPNG, nos damos cuenta que es necesario que las imágenes PNG tengan un nombre que termine en .png para que la librería pueda detectarlas. Lo mismo sucede con otras librería similares. Afortunadamente es muy fácil darle soporte a nuestro script PHP.
Sabemos que las imágenes generadas por el script PHP se logran usando el siguiente código CSS:
background: url(rgba.php?...) |
Así que debemos buscar el lugar donde DD_belatedPNG hace la detección de las imágenes de fondo y agregar el soporte para esta estructura de URL. Solo es necesario reemplazar esta línea:
else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1) { |
por esta:
else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1 && el.currentStyle.backgroundImage.toLowerCase().search('rgba.php?') == -1) { |
Y ya tenemos nuesta página funcionando: Prueba No. 2
Acá les dejo el archivo modificado y minimizado para su comodidad! DD_belatedPNG_0.0.8a-mantish.js