Эффект прозрачности у заголовка

Question

Как сделать такой эффект прозрачности с заголовком на обложке?

.cover {
  background: url(https://jaklaczyckropki.pl/wp-content/uploads/2015/10/Polycyclic_Aromatic_Hydrocarbons_In_Space.jpg) center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.title {
  background-color: rgba(255, 255, 255, 0.5);
  line-height: 100vh;
  color: #000;
}

h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-family: sans-serif;
  word-wrap: break-word;
  font-size: 20vw;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

<div class="cover">
  <h2 class="title">Космос</h2>
</div>

Answer 1

Добавить свойство mix-blend-mode: screen;

* {
  margin: 0;
  padding: 0;
}

.cover {
  background: url(https://jaklaczyckropki.pl/wp-content/uploads/2015/10/Polycyclic_Aromatic_Hydrocarbons_In_Space.jpg) center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.title {
  background-color: rgba(255, 255, 255, 0.5);
  line-height: 100vh;
  color: #000;
  mix-blend-mode: screen;
}

h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-family: sans-serif;
  word-wrap: break-word;
  font-size: 20vw;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

<div class="cover">
  <h2 class="title">Космос</h2>
</div>

БЛОГ НА HUSL

Эффект прозрачности у заголовка

Ответы (1 шт):