Foros del Web » Creando para Internet » CSS »

Fondo semitransparente

Estas en el tema de Fondo semitransparente en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/06/2008, 06:01
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Fondo semitransparente

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)
  #2 (permalink)  
Antiguo 17/06/2008, 11:38
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: Fondo semitransparente

fijate esto:
pone z-index: 0; // a lo que sea el fondo dnd va el texto.
y pone z-index: 1; // al texto.
  #3 (permalink)  
Antiguo 17/06/2008, 12:36
Avatar de u_goldman
Moderador
 
Fecha de Ingreso: enero-2002
Mensajes: 8.031
Antigüedad: 15 años, 11 meses
Puntos: 98
Respuesta: Fondo semitransparente

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
__________________
"El hombre que ha empezado a vivir seriamente por dentro, empieza a vivir más sencillamente por fuera."
-- Ernest Hemingway
  #4 (permalink)  
Antiguo 17/06/2008, 12:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo semitransparente

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.
  #5 (permalink)  
Antiguo 17/06/2008, 13:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo semitransparente

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.
  #6 (permalink)  
Antiguo 17/06/2008, 15:54
(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
Respuesta: Fondo semitransparente

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
  #7 (permalink)  
Antiguo 17/06/2008, 16:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo semitransparente

Un ejemplo con el código un poquillo mejorado en

este enlace

Mikel.
  #8 (permalink)  
Antiguo 23/02/2009, 07:51
Avatar de marisolivier  
Fecha de Ingreso: septiembre-2005
Ubicación: daganzo (madrid)
Mensajes: 76
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Fondo semitransparente

pero como hacer para que el div con fondo transpartente "crezca" con el texto???
__________________
ilustradordiseñadorweb
  #9 (permalink)  
Antiguo 23/02/2009, 08:00
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Fondo semitransparente

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.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.

Última edición por Dalvenjha; 23/02/2009 a las 08:07
  #10 (permalink)  
Antiguo 23/02/2009, 08:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo semitransparente

Cita:
Iniciado por Dalvenjha Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 23/02/2009, 08:27
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Fondo semitransparente

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!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #12 (permalink)  
Antiguo 23/02/2009, 08:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo semitransparente

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.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 31/03/2009, 09:47
(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
Respuesta: Fondo semitransparente

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?
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 17:23.