html - que - Usar pseudoelemento para crear superposición de fondo

selector padre css

Question

Mi objetivo es tener un div con cualquier fondo, que luego utiliza un pseudo elemento para crear una superposición blanca transparente, "iluminando" el fondo del div. Sin embargo, la "superposición" debe estar BAJO el contenido del div. Entonces, en el siguiente ejemplo:

<div class="container">
<div class="content">
<h1>Hello, World</h1>
</div>
</div>
.container {
background-color: red;
width: 500px;
height: 500px;
position: relative;
}
.content {
background-color: blue;
width: 250px;
}
.container::before {
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background-color: rgba(255, 255, 255, .8);
}

La div .content no debe estar "debajo" de la superposición blanca, también .container::before como .container::before .

Preferiría no tener que usar z-index en .content , pero puedo si esa es la única solución.

Objetivo final: el rojo debe cubrirse, mientras que el texto y el azul no.

JS fiddle: http://jsfiddle.net/1c5j9n4x/

Answer 1

Si el pseudo elemento tiene un z-index , entonces necesitaría colocar el elemento .content y agregar un valor de z-index para establecer un contexto de apilamiento .

Ejemplo actualizado

.content {
background-color: blue;
width: 250px;
position: relative;
z-index: 1;
}

..you también podría eliminar el z-index del pseudo elemento y luego simplemente posicionar el elemento .content . Al hacerlo, ninguno de los elementos necesita un z-index . La razón por la que esto funciona es porque el :before pseudo elemento es esencialmente un elemento hermano anterior. Por lo tanto, el elemento .content posterior se coloca en la parte superior.

Ejemplo alternativo

.content {
background-color: blue;
width: 250px;
position: relative;
}
.container::before {
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, .8);
}