Problema al utilizar filter para PNG transparentes en Internet Explorer
El problema
Un problema con el que me encontré ayer y me ha traído de cabeza hasta hoy ha sido que por alguna razón que no acababa de entender, el filter para los PNG transparentes no me acababa de funcionar del todo en Internet Explorer.
Lo curioso era que donde no funcionaba era en el entorno de desarrollo, ya que en las maquetas estáticas no había problema. Después de probar de todo, como sustituir las hojas de estilos por exactamente las mismas que las maquetas, deshabilitar JavaScript, que el código HTML de maqueta y el generado en desarrollo fuera el mismo, me he fijado en un pequeño, pero gran detalle: La ruta de la imagen del filter y la url del HTML de desarrollo.
La ruta de la imagen del filter estaba asignada al directorio img que se encontraba en la raíz del portal, imagen que no estaba encontrando porque la url de desarrollo al ser URL Friendly, filter tomaba los valores como directorios e intentaba buscar el directorio img dentro de la ultima carpeta de la URL Friendly que obviamente no existía.
Ejemplo:
URL Desarrollo
http://localhost/nombre1/nombre2/titulo
Filter:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/mi_imagen.png);
La solución
Tras cerciorarme y asegurarme la gente de desarrollo Backend que los niveles de URL Friendly se iban a mantener intactos (siempre van a ser dos por ‘debajo’ del raíz) lo único que tenía que hacer era cambiar la ruta relativa del filter y ‘voilà!’
Ejemplo:
Filter:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../../img/mi_imagen.png);
No acabo de entender el problema que se te presento, puesto que funciona exactamente igual que cualquier background-image: url(…) y puesto que este filter esta en la hoja de estilos de ie6, debería de hacerse el cambio en el mismo buscar reemplazar que cambias la ruta de las imágenes de fondo… pero bueno a todos se nos pira a veces (a mi el que más).
Un saludo
Mmh.. y no sería mejor usar ruta absoluta? O no lo permite esa propiedad? Digo, de esta manera no importaría cuantos niveles hubiera.
Saludos
@boton:
Pues parece ser que no funciona asi, al menos guiándome por las pruebas que hemos hecho esta mañana. Hemos probado asignando la ruta original del filter, al background-image, y no había problema, nos tomaba el png, obviamente sin transparencia.
@oso96_2000:
Pues se me pasó por la cabeza asignar directamente la ruta absoluta, pero el problema que nos encontramos fue en este proyecto -y para el mismo portal- se manejan una serie de distintos entornos tanto locales, como externos y nos supondría cada vez que hay que hacer un despliegue en cada entorno, cambiar la ruta en el css.
Pero al final, la solución que comentas es la que vamos a tener que hacer, un coñazo.