Foros del Web » Creando para Internet » CSS »

Transparencia compatible para todos los navegadores

Estas en el tema de Transparencia compatible para todos los navegadores en el foro de CSS en Foros del Web. Hola a [email protected], Necesito saber si hay algún modo de realizar transparencias en una web, con alguna tecnología que sirva para todos los navegadores. Quiero ...
  #1 (permalink)  
Antiguo 24/10/2005, 02:57
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Transparencia compatible para todos los navegadores

Hola a [email protected],

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!
__________________
..:: moNTeZIon ::..
  #2 (permalink)  
Antiguo 24/10/2005, 03:36
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola moNTeZIon

En este mensaje hubo una charla interesante sobre las transparencias:

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

Saludos,
  #3 (permalink)  
Antiguo 07/11/2005, 12:18
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
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 [email protected]
__________________
..:: moNTeZIon ::..
  #4 (permalink)  
Antiguo 07/11/2005, 16:57
Avatar de leoj90
Usuario baneado!
 
Fecha de Ingreso: agosto-2005
Mensajes: 1.365
Antigüedad: 12 años, 4 meses
Puntos: 0
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.
  #5 (permalink)  
Antiguo 07/11/2005, 17:02
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #6 (permalink)  
Antiguo 07/11/2005, 20:18
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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!!!!!
__________________
Al final del día hablar es gratis, codificar no lo es
  #7 (permalink)  
Antiguo 07/11/2005, 21:47
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
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
  #8 (permalink)  
Antiguo 08/11/2005, 06:18
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
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.
__________________
..:: moNTeZIon ::..
  #9 (permalink)  
Antiguo 08/11/2005, 19:19
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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]

Última edición por furoya; 09/12/2005 a las 13:08
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:55.