Dealing with opacity

Opacity occurs in projects very often. For example, when you are creating some model windows on a page or lightbox-like gallery. It is used on the layer added under the main window (overlay element), which, in most cases, has added an onclick event listener in JavaScript, which hides the window upon clicking. How can you create this effect? How was it done in the past? Let's start with a simple HTML code:

<header> Header </header>
<main> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore doloremque dolores iure laudantium magni mollitia quam ratione, temporibus ut? Aperiam necessitatibus perspiciatis qui ratione vel! Adipisci eligendi sint unde. </main>
<footer> Footer </footer>

SASS:

header, footer, main
  padding: 50px
  text-align: center

header, footer
  background: red

main
  background: green

Compiled:

header, footer, main {
    padding: 50px;
    text-align: center;
}

header, footer {
    background...