Как спрятать часть букв за background-image?

Question

[atambalasi]

Как сверстать вот такую макет



Мой код

<section class="bg-wrapper">
        <div class="blog-name">
                <h1><span>or<span class="h1-hide-letter">ee</span>n</span> top</h1>
            </div>
</section>

В css через градиент задаюсь цвет но не тот эффект.

.h1-hide-letter{
      background: linear-gradient(to top, $theme-color 20%, transparent 70%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
.bg-wrapper{
  position: relative;
 width:100%;


  &:before{
    content: '';
    width:45%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    background:#fff url("../img/some.jpg") no-repeat;
  }
}

Получилось

Comments

[Илья]

Руки должны быть вырезаны по контуру в формате png и наложены поверх букв.

[Сергей delphinpro]

Как спрятать часть букв за background-image?

Я сегодня уже предлагал одному вопрошающему мысленный эксперимент:

Представьте лист бумаги с нарисованным человеком.
Поверх листа бумаги наложены вырезанные буквы.
Сможете добиться нужного вам эффекта?

Очевидно нет. Значит постановка вопроса неверная, и нужно искать решение в другом направлении. Включите фантазию.

Answer 1

[Gish]

Z-index