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/

InformationsquelleAutor fildred13 | 2015-01-24