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 should not be “underneath” the white overlay, aka
I would prefer not having to use
.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/
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.
..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.