Я хочу, чтобы фон имел другой цвет под SVG и другой цвет над SVG, я установил его в качестве фона. Как мне этого добитьс ⇐ CSS

[Anonymous]

Я хочу иметь отдельный цвет фона под svg и отдельный цвет фона над svg.
Обратите внимание, что я установил фоновое изображение для элемента body и буду использовать макет сетки над ним с помощью для цвета фона установлено значение прозрачное.
Я пробовал использовать сплошные линейные градиенты в качестве цвета фона, но это закрывает изображение SVG. Я хочу, чтобы изображение svg находилось поверх цвета фона.
[img]https://i.sstatic.net /531WPSUH.png[/img]

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

Код: Выделить всё

body {
background-color: linear-gradient(
to bottom,
var(--color-background-primary-light) 0%,
var(--color-background-primary-light) 40%,
var(--color-background-primary-dark) 40%,
var(--color-background-primary-dark) 100%
);
background-image: url("/images/bg-curvy-desktop.svg");
background-size: 100%;
background-repeat: no-repeat;
background-position: 50% 30%;
}

Это это дизайн, который я пытаюсь воссоздать.

Подробнее здесь: https://stackoverflow.com/questions/785 ... fferent-co