Como esta temporada se llevan las transparecias hemos empezado a utilizar el filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() para tener como imagen de fondo de un div un png con transparencia, extensible o no, (próximamente lo describiremos detalladamente). Esto daba un problema muy serio de uso y es que los enlaces, input y demás elementos activos perdían toda actividad, no podíamos, seleccionar, pinchar o escribir.
Nuestro laboratorio I+D Friday I’m in blog ha descubierto una solución que por el momento ha funcionado en nuestras webs
Normas que deben seguir las capas para que no pierdan la actividad los link, input y demás elementos activos contenidos en ellas.
/* Definido el div */
#container_x {
width: 157px;
height: 28px;
padding-top: 8px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/background.png',sizingMethod='fit');
}
/*Con su correspondiente hack para Firefox */
div>#container_x {
background: url(../images/background.png) no-repeat;
}
Se debe cumplir lo siguiente:
- La capa que tiene el filter no puede tener “position:absolute”. Por encima de ella sí se pueden poner divs con posicionamiento absoluto conteniéndola.
- A la capa filter debe aplicarsele estilo mediante identificador id=”", con class=”" no funcionaría.
- Los elementos activos contenidos en la capa filter deben tener definido explícitamente el atributo position a absolute o relativo.
Por ahora esto parece ser necesario y suficiente. Seguiremos informando.
