Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Opacidad

Estas en el tema de Opacidad en el foro de CSS en Foros del Web. Hola gente bueno estoy haciendo una index algo asi: Código: <!DOCTYPE> <html> <head> <meta charset='utf-8'> <link rel='stylesheet' type='text/css' href='/css/style.css'> </head> <body> <header> <div class='barline'> <a ...
  #1 (permalink)  
Antiguo 15/09/2013, 14:27
 
Fecha de Ingreso: junio-2013
Mensajes: 20
Antigüedad: 10 años, 9 meses
Puntos: 0
Opacidad

Hola gente bueno estoy haciendo una index algo asi:

Código:
<!DOCTYPE>
<html>
	<head>
		<meta charset='utf-8'>
		<link rel='stylesheet' type='text/css' href='/css/style.css'>
	</head>
	<body>
		<header>
			<div class='barline'>
				<a href="#home" id='logo'></a>

			    <form id='loginformitem' name='loginformitem' method='post'>

			    </div>

			    	<input type='text' name='username' placeholder='Nombre de usuario' />

			    	<input type='password' name='password' placeholder='Contraseña' />

			    	<button type='submit'>Conectate</button>

			    </div>

			    </form>
		</header>
					<div id='footer'>
						<p>© 2013 - Las imágenes y diseño de este sitio web pertenecen a <a href='http://'
							>MonsterCMS</a>. Todos los derechos reservados.</p>
					</div>
	</body>
</html>

Código:
body {
background: url(../images/background.gif);
font-family:'Segoe UI';
height:100%;
}
body, body * {
margin:0;
padding:0;
}


/*Linia arriba*/
div.barline {
width:100%;
height:100px;
background:#000000;
position:relative;
z-index:10;
overflow:hidden;
opacity: .75;
-moz-opacity: .75;
}
#logo {
	position:absolute;
	width:110px;
	height:40px;
	background-image:url(../images/logo.png);
	left:32px;
	top:27px
}

/*Linea footer*/
#footer{
	position:fixed;
	left:0px;
	bottom:0px;
	height:50px;
	width:100%;
	background:#000000;
	opacity: .75;
	-moz-opacity: .75;
}
#footer p {
	background: rgba(0,0,0,0.0);
	top:30px;
	width:900px;
	height:100px;
	margin:15px auto;
	top:30px;
	display:block;
	color:#fff;
}
#footer a {
	color:#fff;
}

En el <div class='barline'> quiero algo de opacidad pero sin que el logo se opaque como lo hago...

Me refiero en el momento que pongo la opacidad de la barra el logo igual se opaca y no quiero como lo hago?
  #2 (permalink)  
Antiguo 15/09/2013, 14:30
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Opacidad

En lugar de usar opacity, usa un color de fondo transparente para el elemento contenedor, ya que sino la opacidad se heredará a la fuerza.

Puedes usar rgba() o hsla(), ambos tienen un canal de opacidad.

Código CSS:
Ver original
  1. .barline {
  2.   background-color: rgba(0,0,0,0.75);
  3. }

Etiquetas: background, color, html, opacidad
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 14:21.