Estos últimos días he estado algo más "blog-pasivo" de lo habitual. El motivo es que he sido abducido por las bondades del Cascading Style Sheets, y lo mal que llevan algunos navegadores la cuestión de ser o no ser CSS-compliant (adivina cual de todos ellos es el que muestra las hojas de estilo más "a su bola").El caso es que necesitaba mostrar un fondo sobre el que colocar un segundo fondo traslúcido que incluyera un texto y una imagen. Dado que la imagen está incluida en el contenedor del fondo traslúcido, hereda las propiedades (transparencia) de éste, lo que provoca que la primera no se muestre correctamente (es decir, de forma opaca). Buscando en internet encontré este link donde el autor propone un método para conseguir este efecto sin el problema mencionado. El caso es que la técnica descrita funciona con el motor de layouts Gecko (Firefox o Iceweasel, Epiphany...) pero no con el Trident del Internet Explorer (cómo no). Por el momento no he podido probar otros navegadores/layout-engines.
Me puse a experimentar y dí con la forma de hacer lo que quería.
Lo que he hecho es valerme de CSS para situar una segunda imagen opaca, idéntica a la primera pero justo encima de ella.
Reconozco que yo mismo soy el primer detractor de semejante guarrada. Para empezar mi primer pensamiento fue que haciendo esto estaría descargando la misma imagen dos veces, aunque las pruebas de medición que he hecho hasta el momento dan a entender que no. Sin embargo es la única forma que de momento he encontrado para que funcione tanto con Firefox como con Internet Explorer.
Inglés a castellano 
Anglès a català
Deja tu comentario