Fondo semitransparente

PosProdukcion · #1 (**permalink**) 17/06/2008, 05:01

Hola, estoy intentando hacer un texto con fondo semitransparente, para que se vea la imagen de fondo de la página.

Intento evitar el uso de PNGs etc, y estoy utilizando este codigo que he visto en Snipplr. Está muy bien pero no entiendo nada (copy & paste):

Código:

#Layer2 {
    z-index: 0;
	background-color: white;
    opacity: 0.3;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.33;
    /* filter: alpha(opacity=30);*/
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}

Funciona muy bien, pero el problema es que, menos en Internet Explorer, en el resto también me aplica la transparencia al texto que está por encima.

Esta en otra capa y he aplicado z-index para que quede por encima, pero no lo consigo

¿Sabeis como hacer para que el texto quede opaco y solo se aplique transparecia a la capa intermedia?

Gracias
(ah! ya ya se que sobran tablas y está maquetado a la antigua, pero no es mío, me lo ha pasado un amigo para que le eche una mano)

opzina · #2 (**permalink**) 17/06/2008, 10:38

fijate esto:
pone z-index: 0; // a lo que sea el fondo dnd va el texto.
y pone z-index: 1; // al texto.

u_goldman · #3 (**permalink**) 17/06/2008, 11:36

Hola PosProdukcion, primero la explicación corta...IE6 no reconoce png transparentes pues estos hacen uso de canales alfa, los cuáles no son soportados para esta versión, por lo tanto lo que estás haciendo ahí es utilizar un filtro que no es mas que una llamada a un componente de MS para decirle al browser que tiene que hacer para interpretar esa transparencia.

Ahora, lo de manejar el z-index, me parece que necesitas establecer la propiedad position ya sea en relative o absolute para que funcione.

Saludos

Mikmoro · #4 (**permalink**) 17/06/2008, 11:52

La explicación mediana:

creo que sea lo que sea que haya en esa caja, la opacidad le afectará a todos sus componentes, por lo tanto, la solución sería ponerle una posición relativa, poner el resto de componentes fuera de ella en otra caja, y con posición absoluta colocarlos sobre ella. Si en el flujo del documento esta segunda caja es posterior, no te debes preocupar por el z-index, ya que se colocarán encima de manera natural.

Mikel.

Mikmoro · #5 (**permalink**) 17/06/2008, 12:02

Y la explicación larga: "La prueba del delito":

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#caja1 {width: 400px; height: 400px;margin: 50px auto;background-color: #f00;
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.33;
/* filter: alpha(opacity=30);*/
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=30);
}
#caja2 {position: absolute;left: 350px; top: 80px;width: 200px;}
p {color: #f00;font-weight: bold;}
</style>
</head>
<body>
<div id="caja1"></div>
<div id="caja2"><p>Texto de prueba, Texto de prueba, Texto de prueba, Texto de prueba</p><p>Texto de prueba, Texto de prueba, Texto de prueba, Texto de prueba</p><p>Texto de prueba, Texto de prueba, Texto de prueba, Texto de prueba</p>
</div>
</body>
</html>

Tanto la caja como el texto son de color rojo (#f00).

Un pequeño error tonto: si la segunda caja va a estar fuera de la primera, ésta no necesita tener posición relativa.

Mikel.

furoya · #6 (**permalink**) 17/06/2008, 14:54

Síp. Creo que casi no hay otra.
De todas formas, el efecto ya fue muy conversado en el foro (y otros). Aprovecho para dejar algún enlace

Función "opacity" (hay que leer casi hasta el final)

Tablas tranparentes y Contenido 100% Visible

PNG e IE. Pregunta

Mikmoro · #7 (**permalink**) 17/06/2008, 15:18

Un ejemplo con el código un poquillo mejorado en

este enlace

Mikel.

marisolivier · #8 (**permalink**) 23/02/2009, 07:51

pero como hacer para que el div con fondo transpartente "crezca" con el texto???

Dalvenjha · #9 (**permalink**) 23/02/2009, 08:00

Uhmmm no complicándonos y haciendo uso de PNG transparente, si ya estamos usando un filtro para lograr la opacidad en ie, pq mejor no usar el mismo filtro aplicado al png transparente.

Es obvio que al aplicarle opacidad a un elemento, se la aplicamos a todos sus hijos.

Buena intervención Furoya, como siempre bastante informativo.

Mikmoro · #10 (**permalink**) 23/02/2009, 08:14

Cita:

Iniciado por Dalvenjha

Uhmmm no complicándonos y haciendo uso de PNG transparente, si ya estamos usando un filtro para lograr la opacidad en ie, pq mejor no usar el mismo filtro aplicado al png transparente.

¿A qué png transparente te refieres? Explícate, por favor.

marisolivier: el problema para lo que planteas es que para hacer que esa caja sea transparente y su contenido no, lo que hacemos (en mi ejemplo al menos) es que la caja esté vacía y colocada ahí, pero fuera, de manera que el texto no está dentro de ella, y por lo tanto sería algo complicadillo hacer que creciera con el contenido. No digo que no se pueda hacer, habría que pensarlo bien, pero que a primera vista creo que no sería sencillo.

Dalvenjha · #11 (**permalink**) 23/02/2009, 08:27

La persona que posteó el primer mensaje, quiere evitar el uso de PNG transparente, supongo que por lo problemas que tiene con ie 6, sin embargo ya está usando el filtro "alpha-opacity" para lograr la opacidad del div, sería mucho más sencillo que usara el PNG transparente desde un inicio.

Si debiera crecer junto con el div bajo el que está, pues es bastante sencillo en JS y bastante difícil en CSS, voy a probar algo y posteó otra respuesta, lastimosamente estoy algo lleno de trabajo y no puedo ayudar como quisiera ultimamente.

Saludos!!

Mikmoro · #12 (**permalink**) 23/02/2009, 08:52

Ah, de acuerdo. Él decía: "Intento evitar el uso de PNGs etc, ", por eso no entendía a qué PNG transparente te referías.
Como decía, en los ejemplos con CSS sería complicado hacer que la caja conopacidad creciera según el texto. No sé con JS.

furoya · #13 (**permalink**) 31/03/2009, 08:47

Lo que tienen de informativos lo tienen de arcáicos, Dalvenjha. Igual eres muy amable, y voy a tener que empezar a actualizarlos.

En el enlace de Función "opacity", ése que hay que leer casi hasta el final, creo que al mensaje #25; hay un ejemplo sin imagen para una tabla en Firefox, Chrome y Safari con un hack para IExplorer. Es CSS y se estira.

Si la imagen es mosaico, es cierto : se usa *.png y para IE6 se pone un filtro; los demás navegadores 'ven' la transparencia.
O se pone un *.gif semitransparente, que será un asco pero se ve en todos.

Ahora, si la imagen no va en mosaico ...

como hacer un fondo ajustable?