web-dev-qa-db-fra.com

Utiliser un pseudo-élément pour créer une superposition d'arrière-plan

Mon objectif est d'avoir un div avec n'importe quel arrière-plan, qui utilise ensuite un pseudo-élément pour créer une superposition blanche transparente, "éclaircissant" ainsi l'arrière-plan du div. La "superposition" doit cependant être SOUS le contenu du div. Ainsi, dans l'exemple suivant:

<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);
}

Le .contentdiv ne doit pas être "en dessous" de la superposition blanche, alias .container::before.

Je préférerais ne pas avoir à utiliser z-index sur .content, mais je peux si c'est la seule solution.

Objectif final: le rouge doit être couvert tandis que le texte et le bleu ne le sont pas.

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

htmlcsspseudo-element
27
fildred13

Si le pseudo-élément a un z-index, vous devez alors positionner le .content élément et ajoutez un z-index valeur à établir un contexte d'empilement .

Exemple mis à jour 

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

..vous pourrait supprimer également le z-index du pseudo-élément, puis positionnez simplement le .content élément. Pour ce faire, aucun des éléments n'a besoin d'un z-index. La raison pour laquelle cela fonctionne est que le :before le pseudo-élément est essentiellement un élément frère précédent. Ainsi, le .content l'élément est positionné en haut.

Exemple alternatif 

.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);
}
28
Josh Crozier