Transparencias con CSS

Ejemplo del uso de png para el fondo de una capaEntre ayer y hoy hemos tenido una discusión en la lista de distribución sobre CSS ovillo que me ha resultado muy productiva para una web que estaba diseñando.

Hasta entonces yo había usado la técnica que encontré en simple-d, se trata simplemente de definir un color de fondo para la capa y luego especificar su opacidad:

-moz-opacity:0.75;
opacity:0.75;
filter:alpha(opacity=′75′);

Sin embargo, con esta técnica he observado que los elementos que están dentro del contenedor al que se le aplique automáticamente adoptan también esa opacidad (texto, fotos…), y además, como decía stripTM en la lista, esto no se verá bien en todos los navegadores pues no pertenece a CSS1 o CSS2, proponiendo como alternativa las transparencias PNG.

PNG es un formato para imágenes que pretende convertirse en estándar para gráficos y sustituir al GIF, y tiene bastantes ventajas, como la que nos interesa, que permite varios niveles de transparencia.

El inconveniente es que el jodío IE (en Windows, según parece) no interpreta las transparencias de PNG y cuando quieres usar una imagen de este tipo para conseguir que el fondo de una zona sea semitransparente, lo que consigues es un cuadro opaco y poco estético.

Hay muchos (WebFX) muchos (A list Apart) muchos hacks y tutoriales para hacer que IE se lo trague (vaya, creo que esa frase me reportará sendas visitas desde Google…).

Para el diseño que estoy construyendo ahora mismo el que mejor me ha venido ha sido el que encontré en daltonlp porque también indica cómo hacerlo para imágenes de fondo especificadas en archivos CSS, y la que dan es una solución muy elegante, porque permite ponerlo todo sin tener que añadir nada al HTML.

Para hacer que el fondo de una capa sea semitransparente creamos una imagen PNG tal y como queramos, en este ejemplo se llama grey.png, y creamos una clase CSS para estos objetos:

.transp {
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=′grey.png′);
}
/* IE ignores styles with [attributes], so it will skip the following. */
.transp [class] {
background-image:url(′grey.png′);
}

Y para usarlo simplemente tendremos que hacer una capa y darle esta clase.

Hay que tener en cuenta varias cosas al usar esta técnica:

  • La capa o elemento tiene que tener el atributo “class” para que esto funcione, ya que es el hack que empleamos.
  • La anchura del elemento al que lo vamos a aplicar debe estar definida (ya sea en esa misma clase de otra forma)
  • La imagen a usar cuanto más pequeña mejor.

Esto último se debe al principal problema de este método, y es que al usarlo, si la imagen de fondo es grande los enlaces contenidos en el elemento no funcionarán.

En el artículo hay una tabla donde se pueden consultar los tamaños de imágenes de fondo que sí van bien, y en los comentarios mismos hay otros hacks para este problema, como añadir en la capa el estilo del cursor del ratón, o poner a los enlaces posición relativa, pero vamos, yo creo que mejor poner una imagen pequeña, nada más que por estilo, porque hacer un fondo semitransparente para que se vea el de la parte de atrás, y luego poner otro fondo encima quizá resulte algo agresivo.

Aunque esta solución me gusta porque no es intrusiva, no usa javascript, ni PHP ni nada raro, pero no es una solución definitiva porque cuando IE se decida a solucionar su problema con PNG habrá que retocar las webs que hayan usado este truco… ahora vosotros veréis si lo usáis.

25 comentarios

  1. Muy interesante. Se me planteó ese problema el otro día con el #~@#~@#~ explorer y unos PNG con transparencia pero no fuí capaz de arreglarlo. A ver si ahora…

  2. Yo no sé que le habré hecho a mi explorer, no recuerdo haber instalado nada, pero los png con transparencias se me ven bien… :-|

  3. Si, de siempre. Y no tengo intencón de cambiar. Siempre lo he dicho, Windows para trabajar o el día a día, Linux para servidores, Mac para diseño. Como no tengo pasta para un Mac, me quedo con Windows ;-) Si al fin y al cabo me dalo mismo uno que otro…

  4. Muy interesante, estaba pensando en un diseño que tengo que hacer y queria meter un efecto de trasnparencias y ya estaba pensando en hacerlo todo en flash, para no comerme la cabeza….pero creo que voy a mirar esta solución a ver si me gusta como queda.

  5. Sergio, en el IE funcionan las transparencias de los PNGs a medias. Si para hacer las transparencias en el PNG metemos un canal alpha que contenga exclusivamente colores negro o blanco, funciona perfectamente. Si en cambio, metemos tonos de grises (debería mostrarse semitransparente) la cosa se jode.

    Chavalina, gracias por este post. Me va a ser muy útil 🙂

  6. Para Konqueror y Safari <1.2 el equivalente a los códigos de simple-d creo que sería, por ejemplo, -ktml-opacity:0.75; Aunque es algo que no he probado, sólo lo he leído.

  7. buenas, referente al asunto este de los png′s y su incomprensión por parte del navegador-bug IE, existe una funcioncita en javascirpt que la puedes invocar en un onload del body y sin tocar en nada el html:

    function correctPNG(){
    for(var i=0; i”
    myImage.outerHTML = strNewHTML
    // }
    }

    Ahí es nada, peazo BLOB que he metido jeje

  8. tampoco es necesario, con poner en el js la sentencia:

    window.attachEvent(“onload”, correctPNG);

    ya no es necesario poner nada en

  9. Yo creo que no hay que respetar a quien no respeta los estándares.

    Quizás así haya más gente que al ver que las páginas no se visualizan correctamente en el IE, opten por otro.

    Los desterrados, por supuesto ;-)

  10. Eso he hecho yo ocn mis amigos y mi web. Cada vez que me decían que se les colgaba (por una cosa que comenté de css hace tiempo), les decía que leyeran el mensaje que sale con IE. La mayoría ya usan Firefox :-D

    OK benko, no lo sabía. En diseño ando algo pez…

  11. [QUOTE]que la puedes invocar en un onload del body y sin tocar en nada el html:[~QUOTE]

    Si lo llamas desde el body onload, no te validará en W3C.

    Un saludo,

  12. Muchas gracias por este truco, pues necesitaba incluir un png como background de una pequeña capa y no habia manera con el javascript famosete que había visto por hay para IE 5.5.

  13. Se puede si la imagen de fondo es pequeña. Por ejemplo, el sistema de navegación de este weblog, arriba, junto a la foto, está hecho con este método y tiene enlaces que funcionan perfectamente.

  14. Bueno… no es nada nuevo que IE es una perfectisima bola de m/&($(%$?=)(%($!!!!.. pero bue.. que le vamos a hacer… he conseguido este codigo javascript que resuelve el problema.. funciona exelente con todos los formatos de compresion png.. y lo mejor de todo… lo colocas en el HEAD y todas las trasparencias de tu pagina trabajaran perfectamente.. !!! 8-)

  15. que bello el diseño de la foto!! ¿es al q le estas dando pngFX?? espero q cuando lo termines pongas el link para ver como quedo y como sorteaste finalmente al IE (idiot exposed)

  16. casualmente, estaba ultilizando esto para hacer fondos de capa semitransparente, pero si lo utilizo no me funcionan las barras de desplazamiento en la capa. Alguna sugerencia? gracias

  17. Hola a todos solo comentar que el onLoad no te valida en w3c ya que se debe de escribir todo en minusculas: onload asi si que funciona ya que tengo la web en xhtml 1.1 y lo valida perfectamente.

    Un saludo 😉

Comments are closed.