Use Pseudo Element to Create Background Overlay

My goal is to have a div with any background, which then uses a pseudo element to create a transparent white overlay, thus “lightening” the background of the div. The “overlay” must be UNDER the contents of the div, though. So, in the following example:

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

The .content div should not be “underneath” the white overlay, aka .container::before.

I would prefer not having to use z-index on .content, but I can if that is the only solution.

End goal: The red should be covered while the text and blue are not.

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


solution

If the pseudo element has a z-index, then you would need to position the .content element and add a z-index value to establish a stacking context.

Updated Example

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

..you could also remove the z-index from the pseudo element and then merely position the .content element. In doing so, none of the elements need a z-index. The reason this works is because the :before pseudo element is essentially a previous sibling element. Thus, the succeeding .content element is positioned on top.

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