Basic CSS – how to overlay a DIV with semi-transparent DIV on top

Here’s a pure CSS solution, similar to DarkBee’s answer, but without the need for an extra .wrapper div:

.dimmed {
  position: relative;
}

.dimmed:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

I’m using rgba here, but of course you can use other transparency methods if you like.