<div class="container">
  <p class="white">White</p>
  <p class="black">Black</p>
  <p class="light"><span>Light</span></p>
  <p class="dark"><span>Dark</span></p>
</div>

<!-- Sources:

https://daily-dev-tips.com/posts/css-cut-out-effect-that-will-blow-your-mind/

https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

-->

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  min-height: 100%;
}
body {
  background: url(https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80)
    no-repeat center center;
  background-size: cover;
  font-family: Arial;
  min-height: 100%;
  position: relative;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 4rem;
}

p {
  font-size: 6rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25em 0.5em;
  position: relative;
}

p span {
  display: block;
  padding: 0.25em 0.5em;
}

p + p {
  margin-top: 2rem;
}

p.white {
  background: white;
  color: black;
  mix-blend-mode: screen;
}

p.black {
  background: black;
  color: white;
  mix-blend-mode: multiply;
}

p.light {
  /* Add low opacity dark background to improve contrast */
  background: rgba(0, 0, 0, 0.3);
  padding: 0;
}

p.light span {
  background: #d5d2f4;
  color: black;
  mix-blend-mode: lighten;
}

p.dark {
  /* Add low opacity light background to improve contrast */
  background: rgba(255, 255, 255, 0.3);
  padding: 0;
}

p.dark span {
  background: #2f2b59;
  color: white;
  mix-blend-mode: darken;
}