css - transparente - Cómo mantener la opacidad del texto 100 cuando su contenedor principal tiene una opacidad de 50
quitar opacidad css (5)
Tengo una lista div que tiene una opacidad establecida en 50 y dentro de esta div quiero mostrar un texto con opacidad 100,
Esto es lo que quiero decir:
<div id="outer">
<div id="inner">
Text
</div>
</div>
El CSS sería:
#outer {
opacity: 0.5;
}
#inner {
opacity: 1.0;
}
Intenté eso, pero no funciona.
por favor ayuda
Saludos
Esto se puede hacer por un truco y es tan fácil, aquí es cómo:
quieres tomar el texto fuera de la división transparente y eso es haciendo otra división como posición: relativa;
Hay dos formas de hacer esto: una es simplemente establecer el color de fondo del contenedor en un color transparente, con rgba(r,g,b,.5) - Sin embargo, esto es CSS3 y solo es compatible con los navegadores más nuevos.
La otra forma es colocar un div absolutamente posicionado dentro del contenedor, con una opacidad de .5.
<div class="backgroundOpacity">
My Epic Content
</div>
<br/>
<div class="backgroundDiv">
<div id="background"> </div>
My Other Epic Content
</div>
.backgroundOpacity {
background-color:rgba(0,0,0,.5);
}
.backgroundDiv {
position:relative;
}
#background {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
opacity: .5;
}
Una solución simple y compatible es eliminar toda su opacity y usar:
#outer {
background: url(50%-transparent-white.png);
background: rgba(255,255,255,0.5)
}
- Los navegadores que admiten
rgbautilizarán la segunda declaración debackgroundconrgba. - Los navegadores que no lo hagan ignorarán la segunda declaración de
backgroundy usarán el.png.
El .png no funcionará en IE6, pero es unlikely que sea un problema . Si es así, se puede resolver .
Otro método se detalla aquí:
Usted podría configurar su div exterior de esta manera
background-color: rgba(0, 0, 0, 0.8); opacity: inherit;
background-color: rgba(0,0,0,0.5);