Transparencia compatible para todos los navegadores

[moNTeZIon]

Hola a tod@s,

Necesito saber si hay algún modo de realizar transparencias en una web, con alguna tecnología que sirva para todos los navegadores.
Quiero pintar una tabla de un color, digamos, semitransparente, de forma que permita entrever el fondo.
Me da igual si es a base de CSS o si se puede meter un GIF de 1x1 semitransparente como fondo de la tabla - esto lo he probado y no va - o cualquier otro modo.

Gracias por sus aportaciones.
Un saludo!

[JavierB]

Hola moNTeZIon

En este mensaje hubo una charla interesante sobre las transparencias:

http://www.forosdelweb.com/f53/cambiar-opacidad-imagenes-306765/

Saludos,

[moNTeZIon]

Al final he optado por la que me ha parecido la mejor opcion, al menos por el momento.. Como tampoco hay una explicación concisa por ahí y he tenido que mirar en varios sitios hasta entenderlo y llegar a conclusiones, aquí pongo la solucion que me ha parecido menos trabajosa y más "lógica" para mi.

La tabla que quiero que tenga un fondo semitransparente para que se entrevea el fondo de la página la escribo así:

<table width="100%" border="0" cellpadding="5" cellspacing="0" class="Transp10">

Dandole la class="Transp10"

Y el CSS para Transp10 es el siguiente:

.Transp10 {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled='true', sizingMethod='scale', src='Images/Transp10.png');
}
/* Este no lo entiende explorer, con lo que servirá para Geko sin interferir */
.Transp10[class] {
background-image: url('Images/Transp10.png');
}

En mi caso Transp10.png es un PNG con transparencia del 10%.
Con esto, por lo menos funciona en Explorer y en Firefox, con el sistema de transparencias de PNG.
El otro sistema de jugar con -moz-opacity y filter, etc.. no me convenció mucho, y tampoco otros que he visto por ahí que emplean javascript.

Si alguien conoce algun inconveniente en hacerlo así agradecería que lo comentara.

Saludos a tod@s.

[leoj90]

En Js:

Código:

<script language="JavaScript1.2">

function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=30
}

function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>

Y en la imagen:

Código:

<img src="imagen.png" border="0" onMouseover="high(this)" onMouseout="low(this)">

Le cambias la transparencia en el 1er codigo y listo.

[webosiris]

no leoj90, el lo quiere para fondo de una tabla, no para una imagen... para una imagen lo mejor para mi es con el filter y el -moz-opacity...

[baccxus]

han probado con el "behavior.htc", yo lo he usado y no me funciona correctamente, o sea, me aparece la imagen pero encima aparece el cuadro de explorer de cuando no está la imagen con un cuadradito con una X.

God bless Firefox!!!!!

[CORE]

Código HTML:

filter:alpha(opacity=100);   /*Microsoft IE*/
-moz-opacity: 1.0;   /*Geko - Firefox, Mozilla DeerP*/
opacity: 1.0;/*Navegadores que interpreten CSS3*/
-khtml-opacity: 1.0; /*Safari*/

seria lo mas completo faltaria que funcione solo en Opera

saludos

[moNTeZIon]

OK, estas soluciones funcionan bien, pero bien implementadas. Me refiero a que tienen comportamientos extraños, frente a los que se ha de actuar en consecuencia haciendo algun apaño más trabajoso. Por ejemplo, ahora no recuerdo si era con filter o con -moz-opacity, pero me transparentaba todo lo que contenia ese contenedor, valgame la redundancia. Con lo que hay que formar una capa por encima, especificando altos y anchos...
En fin, lo más simple fue con PNG y AlphaImageLoader.

Eso si, para <IMG> se puede solventar rápidamente con alguno de esos métodos, pero como dice WebOsiris, la intención era tener tablas semitransparentes por la pagina, manteniendo la opacidad de los elementos que contienen, y los PNGs fueron la solucion.

Saludos.

[furoya]

Hola todos :

moNTeZIon : en el enlace que puso JavierB ( ) hay uno al final que tiene el ejemplo de como transparentar el contenedor y no el contenido usando CSS. En Opera todavía no anda ( nunca incorporó -o-opacity ), y en algùn otro seguro que tampoco; pero debe ser cuestìón de esperar; el opacity a secas ya existe.

saludos

furoya

[edit]

Aquí hay un ejemplo que se supone multiplataforma, con imágenes.

A vueltas con la compatibilidad

[/edit]