Я пытаюсь получить дважды один и тот же текст, один над другим. Этот текст вырезан изображением.
Эти тексты находятся в том же самом div, который центрирован, но их z-индекс остается тем же.
Я пытался изменить любой z-индекс своих элементов.
.bottom {
font-family: Gotham;
font-style: normal;
font-weight: 900;
font-size: 144px;
color: #ededed;
position: absolute;
}
.up {
font-family: Gotham;
font-style: normal;
font-weight: 900;
font-size: 144px;
color: transparent;
-webkit-text-stroke: #ededed 2px;
z-index: 2;
position: absolute;
}
.group {
position: relative;
width: 465.125px;
height: 144px;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);
margin-top: 30%;
z-index: 1;
}
<div class="group">
<p class="up">ZAIUS</p>
<p class="bottom">ZAIUS</p>
</div>
Я хочу иметь заполненный текст под изображением и текст обводки.
И текст обводки должен быть выше другого и изображения.