html - que - Usar pseudoelemento para crear superposición de fondo
selector padre css (1)
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/
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 .
.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.
.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);
}