В общем, проблема такая. Есть фон, градиентовский. Поверх него нужно наложить картинку svg, да так, что бы они вместе совпали, и картинка svg приняла тот цвет. Вот пример:
Как видите, картинка градиентовская. Пытался сделать через background-blend-mode
, но он мне позволил лишь сделать так, как нужно, но только загвоздка в том, что наложить можно лишь один цвет. Вот как это у меня получилось:
Пытался сделать градиент через свойство background
, но в этом случае картинка не отображается, а отображается лишь в том случае, когда прописываю через свойство background-color
.
Вот сам код:
.ready_btns {
width: 100%;
height: 100vh;
background-blend-mode: color-burn;
background-image: url(https://uploads-ssl.webflow.com/602787a8a1e988ce61a0a453/602787a9abcefc3c6b0a8f86_wavy-bg.svg);
background-position: top;
background-color: #350e47;
background-repeat: no-repeat;
background-size: cover;
}
Буду благодарен за поддержку.