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

Question

Моя цель состоит в том, чтобы иметь 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); 
} 

.contentdiv не должно быть «под» белый оверлей, иначе .container::before.

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

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

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

Answer 1

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

Updated Example

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

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

Alternative Example

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