Foros del Web » Creando para Internet » CSS »

Como hago una capa semi trasnparente??

Estas en el tema de Como hago una capa semi trasnparente?? en el foro de CSS en Foros del Web. Hola he visto varias paginas en las que usando layers (capas) logran el efecto de opcacidad 50% (Medio se ve el fondo) detras de la ...
  #1 (permalink)  
Antiguo 21/07/2004, 04:07
Avatar de HIa
HIa
 
Fecha de Ingreso: noviembre-2002
Ubicación: Cartago
Mensajes: 121
Antigüedad: 21 años, 5 meses
Puntos: 0
Como hago una capa semi trasnparente??

Hola he visto varias paginas en las que usando layers (capas) logran el efecto de opcacidad 50% (Medio se ve el fondo) detras de la capa me gustaria saber como puedo lograr dicho efecto. alguine sabe, alguna pagina de guias ...help!!!
__________________
Siempre hay algo nuevo que aprender
  #2 (permalink)  
Antiguo 21/07/2004, 04:49
Avatar de catal  
Fecha de Ingreso: julio-2004
Ubicación: BCN
Mensajes: 199
Antigüedad: 19 años, 9 meses
Puntos: 0
Wola, ¿no te serviria crear un fondo semitransparente y colocarlo en la capa?
__________________
Vive de manera que puedas mirar fijamente a los ojos de cualquiera y mandarlo al diablo.
-- Mencken, Henry-Louis --
  #3 (permalink)  
Antiguo 21/07/2004, 17:42
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 19 años, 9 meses
Puntos: 2
Una imagen semitransparente solo funcionaría (imagino) en navegadores que utilizen el motor Gecko. Pero seguro no funciona en IE, pues tiene la horrorosa costubre de no soportar canales ALFA.

La solución está en las hojas de estilo. Utiliza las siguientes propiedades:

Para motores Gecko:

-moz-opacity:0.1;

El valor puede ir de 0 (transparente) a 1 (opaco).

Para Internet Exploiter:

filter:alpha(opacity="10");

El valor puede ir de 0 (transparente) a 100 (opaco).

Ambas propiedades se pueden combinar en la misma hoja de estilos sin interferir entre ellas.

NOTA: IE solo transparenta el color de fondo y la imagen de fondo del objeto en cuestión. El motor Gecko transparenta TODO. Contenido y fondo. Si no deseas que se transparente el contenido utiliza otra capa dentro de la translucida que lo contenga. Obviamente ésta sin fondo.

Ejemplo:

div.menu{
-moz-opacity:0.1;
filter:alpha(opacity="10");
}

Solo basta aplicarlo a la capa.
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."

Última edición por KnowDemon; 21/07/2004 a las 17:48
  #4 (permalink)  
Antiguo 22/07/2004, 20:44
Avatar de HIa
HIa
 
Fecha de Ingreso: noviembre-2002
Ubicación: Cartago
Mensajes: 121
Antigüedad: 21 años, 5 meses
Puntos: 0
Gracias

KnowDemon ya llego a probarlo a la casa de antemano muchas gracias cualquier cosa aqui pongo mis resultados bie
__________________
Siempre hay algo nuevo que aprender
  #5 (permalink)  
Antiguo 23/07/2004, 03:28
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Tema trasladado al foro de CSS desde (x)html
  #6 (permalink)  
Antiguo 23/07/2004, 10:17
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 22 años, 2 meses
Puntos: 90
hola, estube viendo esto de las transparencias y me parece bárbaro, pero tengo un problema que no me sale...

Tengo una celda con la siguiente clase
td.caca {-moz-opacity:0.1; filter:alpha(opacity="10"); background-image:url(0432.jpg);}

y me muestra el fondo transparente como quiero, pero también me transparente todo el contenido de la celda...Intenté lo que dijo KnowDemon pero no me sale !!!

hago esto...
<td class="caca"><div class="caca2"><strong>blablabla

y nada, me sigue transparentando todo el texto de adentro, intenté también colocar el class="caca" en un div pero me salió peor !!!

Tambièn intenté colocar -moz-opacity:1; filter:alpha(opacity="100") en caca2 pero tampoco funca

Si alguien puede ayudarme se lo agradezco de antemano!!!
__________________
Esteban Quintana

Última edición por monoswim; 23/07/2004 a las 10:19
  #7 (permalink)  
Antiguo 23/07/2004, 10:23
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Es que aunque sea otra capa sigue siendo un contenido de la otra y como tal le queda la transparencia.

Debe de ser independiente. Prueba así


<div class="caca2" style="position: absolute"><strong>blablabla</strong></div><td class="caca">

Es decir, la que lleve los contenidos deberá quedar en posición absolute en las mismas coordenadas que la otra y por encima, pero como capa independiente, no como contenido de la que lleva el cambio de opacidad
  #8 (permalink)  
Antiguo 23/07/2004, 11:30
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 22 años, 2 meses
Puntos: 90
ha, gracias, pero entonces no se puede hacer lo que yo quería...porque odio colocar las posiciones de los objetos de mi página...Me gusta que todo esté en tablas normales...

Te agradezco mucho
__________________
Esteban Quintana
  #9 (permalink)  
Antiguo 23/07/2004, 11:36
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Me parece que no es necesario que le des coordenadas, deja que haga un ejemplo y te lo pongo
  #10 (permalink)  
Antiguo 23/07/2004, 12:10
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Mira, prueba este ejemplo


<style type="text/css">
.caca {
background-image: url(0432.jpg);
-moz-opacity:0.1;
filter: Alpha(Opacity=10);
width: 100%;
}
.caca2 {
position: absolute;
}
</style>

Eso por arriba, y en body....


<table width="44%" border="1" cellpadding="0" cellspacing="0">
<tr>

<td width="52%">
<div class="caca2"><strong>blablabla</strong></div>
<div class="caca">&nbsp;</div></td>
</tr>
</table>

fíjate que si le cambias la posición a la tabla, la centras o la pones a la derecha se mantienen las capas en su sitio

por cierto que no me fijé que la opacidad la aplicabas a una celda. Obviamente, lo que esté dentro heredará la propiedad, por eso el contenido sin opacidad debe estar, jerárquicamente, a la misma altura que la capa que contenga el fondo con la opacidad alterada.

Última edición por tunait; 23/07/2004 a las 12:12
  #11 (permalink)  
Antiguo 23/07/2004, 13:24
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 22 años, 2 meses
Puntos: 90
Tunait, ESTOY PERDIDAMENTE ENAMORADO DE VOS !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Por casualidad tu casa queda en Argentina ?

jaja

Lo probé y anda 10 puntos, ahora lo tengo que probar en la página que estoy haciendo...

Gracias y saludos !!!
__________________
Esteban Quintana
  #12 (permalink)  
Antiguo 23/07/2004, 13:33
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 22 años, 2 meses
Puntos: 90
Una cosa sola, el div que contiene el fondo no tiene contenido, razón por la cual tiene solo un renglon de alto...esto es para poner en una celda...Hay alguna forma que me tome el alto de la celda?

Gracias
__________________
Esteban Quintana
  #13 (permalink)  
Antiguo 23/07/2004, 13:40
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Ah, facil, dale un height: 100%


.caca {
background-image: url(0432.jpg);
-moz-opacity:0.1;
filter: Alpha(Opacity=10);
width: 100%;
height:100%
}



Cita:
Por casualidad tu casa queda en Argentina ?
jajaja qué va, al otro lado del charco nomás (en Espein)

Última edición por tunait; 23/07/2004 a las 13:57
  #14 (permalink)  
Antiguo 23/07/2004, 14:16
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 22 años, 2 meses
Puntos: 90
Pues ya tienes un admirador en américa !!!

Suerte y muchas gracias !!!
__________________
Esteban Quintana
  #15 (permalink)  
Antiguo 25/07/2004, 10:16
Avatar de HIa
HIa
 
Fecha de Ingreso: noviembre-2002
Ubicación: Cartago
Mensajes: 121
Antigüedad: 21 años, 5 meses
Puntos: 0
Exclamación


Se salen KnowDemon y tunait gracias en verdad me sirvio mucho

Otra cosa donde encuentro estas propiedades revise el manual de ccs2 y no las he visto algun sitio de referencia?
__________________
Siempre hay algo nuevo que aprender
  #16 (permalink)  
Antiguo 26/07/2004, 09:50
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 19 años, 9 meses
Puntos: 2
No las vas a encontrar en ningún manual de CSS2 pues la translucencia es una porpuesta para el CSS3. Sin embargo los navegadores y motores mencionados la soportan (aunque de manera diferente como podrás darte cuenta)
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."

Última edición por KnowDemon; 26/07/2004 a las 09:52
  #17 (permalink)  
Antiguo 28/07/2004, 20:46
(Desactivado)
 
Fecha de Ingreso: julio-2004
Ubicación:
Mensajes: 36
Antigüedad: 19 años, 8 meses
Puntos: 1
hola

alguien me podria decir que es eso de los motores gecko, los canales alfa

y esta propiedad

-moz-opacity:0.1;
  #18 (permalink)  
Antiguo 29/07/2004, 00:46
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 19 años, 9 meses
Puntos: 2
Cita:
Iniciado por srweb
hola

alguien me podria decir que es eso de los motores gecko, los canales alfa

y esta propiedad

-moz-opacity:0.1;
Con gusto... Verás, la historia ultra rápida viene así:

Hace algunos ayeres el navegador más usado era el Netscape Navigator. Cuando Win9X comenzo a incluir el Internet Exploiter la popularidad de Netscape bajo, pues muchos, al ya tener un navegador preinstalado con el sistema operativo, no veían la necesidad de descargar otro. Al final de esta guerra de navegadores Internet Exploiter salío 'vencedor'... La compañia Netscape liberó el código fuente de su navegador, y de él nació el proyecto Mozilla. El motor para dibujar las páginas del proyecto Mozilla se llama Gecko, que es descendiente directo del antiguo Netscape.

En la actualidad muchos navegadores (para PC, móvil, etc.) usan el motor Gecko para representar las páginas. Como por ejemplo: Mozilla, FireFox, Camino, Minimo, el navegador del WinAmp, etc...

Los canales ALFA son un 'canal' (valga la redundancia) que les permite a las imagenes definir un grado de transparencia. El formato PNG tiene amplio soporte de canales ALFA, lo que permite crear imagenes transparentes, o semitransparentes. El gran problema es que Internet Exploiter no soporta los canales alfa de más de 1 bit para los PNG, y por consecuencia no se ven correctamente.

El -moz-opacity:0.1; es una propiedad CSS que solo soportan los navegadores basados en Gecko y tiene su origen en la posible recomendación sobre translucencia que podría incluir el estándar CSS3 (que todavía no existe)
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."
  #19 (permalink)  
Antiguo 25/10/2008, 05:00
 
Fecha de Ingreso: mayo-2006
Ubicación: Logroño
Mensajes: 86
Antigüedad: 17 años, 11 meses
Puntos: 0
Respuesta: Como hago una capa semi trasnparente??

Gracias Tunait, Knowdemon y todos los demás!

Funciona de cine, una gran aportación!
  #20 (permalink)  
Antiguo 25/10/2008, 07:16
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Respuesta: Como hago una capa semi trasnparente??

El mensaje original es de hace más de 4 años. Por favor, no reviváis temas tan antiguos.

Saludos,
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.
Tema Cerrado

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 09:46.