Foros del Web » Creando para Internet » CSS »

opacity en el background pero no al texto

Estas en el tema de opacity en el background pero no al texto en el foro de CSS en Foros del Web. Bueno tengo este problemita. Trato de poner opacity en el color de fondo de un div, pero no quiero que también el texto tenga esta ...
  #1 (permalink)  
Antiguo 02/10/2011, 11:57
Avatar de lgga  
Fecha de Ingreso: octubre-2004
Mensajes: 443
Antigüedad: 20 años, 2 meses
Puntos: 37
opacity en el background pero no al texto

Bueno tengo este problemita. Trato de poner opacity en el color de fondo de un div, pero no quiero que también el texto tenga esta característica.

html
Código HTML:
<div id="titulo">
	  <h2>Bla bla bla</h2></div>

     </div> 
css
Código HTML:
#titulo {

	background-color:#593F3D;
	opacity: 0.3;
	width:336px;
		}
aquí la imagen de como se ve, el texto debería salir en blanco, pero no lo hace.

__________________
Breaking the LAW
TSM
  #2 (permalink)  
Antiguo 02/10/2011, 13:41
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 14 años, 3 meses
Puntos: 63
Respuesta: opacity en el background pero no al texto

es que lo que estarias haciendo es asignarle la propiedad a todos los elementos de dentro del DIV.
Crea un estilo como este haber
Cita:
#titulo h2{opacity: 0;}
Saludos
  #3 (permalink)  
Antiguo 02/10/2011, 14:16
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: opacity en el background pero no al texto

partiendo de que tu html es incorrecto
Cita:
<div id="titulo"></div>
<h2>Bla bla bla</h2>
ahora al h2 se le da posición absolute, con el top y left que quieras y también has de añadir z-index
  #4 (permalink)  
Antiguo 02/10/2011, 17:55
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 9 meses
Puntos: 142
Respuesta: opacity en el background pero no al texto

La otra opción es que pongas un alfa al color de fondo, ya que opacity afecta a todo su contenido por igual:

Código PHP:
background-color:rgba(0,0,0,0.5); 
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 03/10/2011, 04:48
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: opacity en el background pero no al texto

al usar rgba que es css3, los navegadores antiguos no lo soportan
  #6 (permalink)  
Antiguo 03/10/2011, 09:35
Avatar de lgga  
Fecha de Ingreso: octubre-2004
Mensajes: 443
Antigüedad: 20 años, 2 meses
Puntos: 37
Respuesta: opacity en el background pero no al texto

Excelentes tips amigos, muchas gracias.

@IsabelM ya deberían desaparecer los usuarios con navegadores viejos........jeje
__________________
Breaking the LAW
TSM

Etiquetas: html, opacity, fondo
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 05:00.