Использовать псевдоэлемент для создания фонового наложения

Моя цель состоит в том, чтобы иметь div с любым фоном, который затем использует псевдоэлемент для создания прозрачного белого наложения, таким образом, "осветляя" фон div. Однако "наложение" должно быть под содержимым div. Итак, в следующем примере:

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

.content div не должен быть "под" белым наложением, ака .container::before.

Я бы предпочел не использовать z-index в .content, но я могу, если это единственное решение.

Конечная цель: красный цвет должен быть покрыт, а текст и синий - нет.

JS скрипт: http://jsfiddle.net/1c5j9n4x/

ОТВЕТЫ

Ответ 1

Если псевдоэлемент имеет z-index, вам нужно будет поместить элемент .content и добавить значение z-index в установить стекирование контекст.

Обновленный пример

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

.. вы также можете удалить z-index из псевдоэлемента, а затем просто поместить элемент .content. При этом ни один из элементов не нуждается в z-index. Причина этого в том, что псевдо-элемент :before является, по существу, предыдущим элементом брата. Таким образом, следующий элемент .content расположен сверху.

Альтернативный пример

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