| ||||
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 -- |
| ||||
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 |
| ||||
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 |
| ||||
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 |
| ||||
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 |
| ||||
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"> </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 |
| ||||
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 |
| ||||
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 |
| ||||
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: jajaja qué va, al otro lado del charco nomás (en Espein) Por casualidad tu casa queda en Argentina ? Última edición por tunait; 23/07/2004 a las 13:57 |
| ||||
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?
__________________ |
| ||||
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 |
| ||||
Cita: Con gusto... Verás, la historia ultra rápida viene así:
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; 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." |