Cómo mantener el texto opacidad 100 cuando su contenedor principal es tener opacidad de 50

Question

Tengo una lista div que tienen una opacidad ajustado a 50 y dentro de este div Quiero mostrar un texto con opacidad 100,

Esto es lo es decir:

<div id="outer"> 
    <div id="inner"> 
    Text 
    </div> 
</div> 

El CSS sería:

#outer { 
    opacity: 0.5; 
} 

#inner { 
    opacity: 1.0; 
} 

lo he intentado, pero no funciona.

favor ayuda

Saludos

Answer 1

Hay dos maneras de hacer esto: uno es para establecer sólo el color de fondo del contenedor a un color transparente, con rgba(r,g,b,.5) - Sin embargo, esto es CSS3 y sólo está soportado en navegadores más nuevos.

La otra forma es soltar un divisor divisoramente 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; 
} 

http://jsfiddle.net/thomas4g/vVt8D/1/

Answer 2

Una solución sencilla y compatible es eliminar toda su opacity, y uso:

#outer { 
    background: url(50%-transparent-white.png); 
    background: rgba(255,255,255,0.5) 
} 

• navegadores que soportan rgba utilizará la segunda declaración background con rgba.
• Los navegadores that do not ignorarán la segunda declaración background y utilizarán el .png.

_{El .png no funcionará en IE6, pero eso es unlikely a ser un problema . Si lo es, it can be resolved.}

---

Sin embargo, se detalla aquí otro método:

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Answer 3

Se podría establecer su div exterior como esto

background-color: rgba(0, 0, 0, 0.8); opacity: inherit;

Answer 4

background-color: rgba(0,0,0,0.5); 

Answer 5

Esto se puede hacer por una truco y es tan fácil, aquí está h ow:

quieres llevar el texto fuera del div transparente y eso es haciendo otro div sat como position: relative;