Как задать динамический c URL фонового изображения с линейным градиентом, используя пользовательский класс CSS в Angular

Question

Я хотел бы иметь возможность установить background-image, используя динамически загружаемое изображение (с моего сервера) вместе с оверлеем линейного градиента, используя пользовательский класс CSS. При загрузке страницы CSS должно выглядеть следующим образом:

.container {
    background-image: linear-gradient(transparent -30%,#121212), url(https://...)
}

Однако цвет: #121212 необходимо установить с помощью пользовательской переменной css с именем --ion-color-dark, а URL-адрес сохраняется в объекте ответа http: this.response.imageURL

Так что мне нужно что-то вроде этого:

.container {
    background-image: linear-gradient(transparent -30%,var(--ion-color-dark)), url(`${this.response.imageURL}`)
}

Мое решение до сих пор:

I Выяснили, как получить URL изображения для загрузки, выполнив следующие действия в моем HTML:

<div class="container" [ngStyle]="{'background-image': getBackgroundImageURL()}"></div>

, который вызывает getBackgroundImageURL() в моем компоненте:

getBackgroundImageURL() {
    return `linear-gradient(transparent -30%,#121212, url(${this.response.imageURL})`;
}

, который отлично, но я не могу понять, как загрузить переменную CSS вместо жестко закодированного #121212, используя этот метод. Похоже, я могу сделать одно или другое, но не оба.

Есть предложения? Спасибо!

Answer 1

Вы можете сделать это, определив переменную следующим образом-

getBackgroundImageURL () {return linear-gradient(transparent -30%,var(--my-variable-name)), url(${this.response.imageURL}); }