L'utilisation de Pseudo-Élément pour Créer le Fond de Superposition
Mon but est d'avoir un div avec l'arrière-plan, qui utilise alors un pseudo-élément pour créer un blanc transparent overlay, donc "l'allègement" le fond de la div. La "superposition" doit être SOUS le contenu de la div, si. 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);
}
La .content
div
ne doit pas être "sous" la superposition de couleur blanche, aka .container::before
.
Je préfère ne pas avoir à utiliser z-index
sur .content
, mais je peux si c'est la seule solution.
Objectif final: Le rouge devrait être couvert, tandis que le texte et le bleu ne sont pas.
JS fiddle: http://jsfiddle.net/1c5j9n4x/
Vous devez vous connecter pour publier un commentaire.
Si le pseudo élément a un
z-index
, vous devez positionner le.content
élément et ajouter unz-index
de la valeur à établir un contexte d'empilement.mise à Jour de l'Exemple
..vous pourrait aussi supprimer le
z-index
de la pseudo-élément et ensuite simplement la position de la.content
élément. En agissant de la sorte, aucun de ces éléments ont besoin d'unz-index
. La raison pour laquelle cela fonctionne est parce que le:before
pseudo-élément est essentiellement un élément frère précédent. Ainsi, l'réussir.content
élément est positionné sur le dessus.autre Exemple
position: relative;
a été déplacé à la.content
bloc qui est le parent de l'élément où la::before
élément doit être inséré. OP de mettre laposition: relative
sur le.container
qui le::before
élément serait du côté de la, pas à l'intérieur de. Ainsi, le::before
élément n'avait rien "d'attacher" à. Si cette réponse est correcte, mais pas pour les raisons exposées dans la réponse. Déplacerposition:relative
pour le parent elz-index
deauto
qui se comporte très différemment de1
; lire le cahier des charges.