Estoy utilizando algo similar al siguiente código:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
Esperaba que esto hiciera que el fondo tuviera una opacidad de 0,4 y que el texto tuviera una opacidad del 100%. En cambio, ambos tienen una opacidad de 0,4.
Los niños heredan la opacidad. Sería raro e inconveniente que no lo hicieran.
Puede utilizar un archivo PNG translúcido para su imagen de fondo, o utilizar un color RGBa (a de alfa) para su color de fondo.
Por ejemplo, un fondo negro difuminado al 50%:
-- begin snippet: js hide: false console: true babel: false -->
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
Yo haría algo así
<div class="container">
<div class="text">
<p>text yay!</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.container::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('/path/to/image.png');
opacity: .4;
content: "";
z-index: -1;
}
Debería funcionar. Esto es asumiendo que usted está obligado a tener una imagen semi-transparente BTW, y no un color (que sólo debe utilizar rgba para). También se supone que no se puede' simplemente alterar la opacidad de la imagen de antemano en Photoshop.
Esto se debe a que el div interior tiene el 100% de la opacidad del div en el que está anidado (que tiene un 40% de opacidad).
Para evitarlo, hay algunas cosas que puedes hacer.
Podrías crear dos divs separados como este:
<div id="background"></div>
<div id="bContent"></div>
Establece la opacidad CSS que desees y otras propiedades para el fondo y utiliza la propiedad z-index (z-index) para estilizar y posicionar el div bContent. Con esto se puede colocar el div por encima del div de fondo sin que su opacidad se vea afectada.
Otra opción es RGBa. Esto le permitirá anidar sus divs y aún así lograr la opacidad específica de div.
La última opción es simplemente hacer una imagen .png semitransparente del color que desee en el editor de imágenes de su elección, establecer la propiedad background-image a la URL de la imagen y entonces no tendrá que preocuparse de jugar con el CSS y perder la capacidad y la organización de una estructura div anidada.