Как сделать отражение теста, но на фоновой картинке?

Question

Вместо черного фона будет обычная картинка

.text {
  color: #2FA8FF;
  position: relative;
  font-family: sans-serif;
  font-size: 42px;
  padding: 40px 50px 60px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 28px;
  background: url(https://vesti.ua/wp-content/uploads/2020/05/samaya-krasivaya-devushka-v-mire-800x530.jpg);
}
.text-shadow {
    position: absolute;
    transform: scale(1, -1);
}

<div class="text">
    <div>Зеркало</div>
    <div class="text-shadow">Зеркало</div>
</div>

Answer 1

Нашел решение.

Протестировал, вот где поддерживается:

Google Chrome - Работает
Firefox - Работает
Opera Browser - Работает
Microsoft Edge - Работает
Internet Explorer - Не работает, так как нет свойства webkit

.text {
  color: #2FA8FF;
  position: relative;
  font-family: sans-serif;
  font-size: 42px;
  padding: 40px 50px 60px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 28px;
  background: url(https://vesti.ua/wp-content/uploads/2020/05/samaya-krasivaya-devushka-v-mire-800x530.jpg);
}
.text-shadow {
    position: absolute;
    transform: scale(1, -1);
    background: -webkit-linear-gradient(transparent, #2FA8FF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

<div class="text">
    <div>Зеркало</div>
    <div class="text-shadow">Зеркало</div>
</div>

Answer 2

Тьфу, не прочитал про картинку... С картинкой не работает.

У меня выглядит вот так, но поскольку я не заморачивался с подключением кастомных шрифтов, может немного поехать из-за других дефаултных шрифтов в системе или браузере. Если подключить свой веб-шрифт и подогнать размеры под него, то расхождений быть не должно.

body {
  background: black;
}

div {
  text-transform: uppercase;
  color: #2FA8FF;
  font-size: 64px;
  line-height: 43px;
}

div::before, div::after {
  content: attr(aria-label);
  display: block;
}

div::after {
  transform: scaleY(-1);
}

section {
  position: relative;
}

section::before, section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}

section::before {
  top: 0;
  bottom: 50%;
  background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent 50%, rgba(0,0,0,.25));
}

section::after {
  top: 50%;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), black);
}

<section>
  <div aria-label="Зеркало"></div>
</section>

БЛОГ НА HUSL

Как сделать отражение теста, но на фоновой картинке?

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