Как сверстать на css такой двухцветный заголовок как на картинке?
.wrapper {
z-index: -2;
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
background-image: linear-gradient(180deg, green 50%, white 50%);
display: flex;
flex-direction: column;
justify-content: center;
}
.wrp {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50vh;
background: url("https://mtdata.ru/u25/photo8028/20933786589-0/original.jpeg") center bottom no-repeat;
background-size: cover;
}
p {
text-align: center;
font-size: 10vw;
white-space: nowrap;
text-transform: uppercase;
}
<div class="wrapper">
<div class="wrp"></div>
<p>Семейное древо</p>
</div>