如何使用 Angular 中的自定义 CSS 类设置具有线性渐变的动态背景图像 URL

Question

I would like to be able to set a background-image using a dynamically loaded image (from my server) along with a linear gradient overlay using a custom CSS class. On page load, the CSS should look like this:

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

However, the color: #121212 needs to be set using a custom css variable called --ion-color-dark and the url is stored in an http response object: this.response.imageURL

So I would need something like this:

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

My solution so far:

I've figured out how to get the image url to load by doing the following in my HTML:

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

Which calls getBackgroundImageURL() in my component:

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

Which is great, but I cannot figure out how to load the CSS variable to replace the hard coded #121212 using this method. It appears I can do either one or the other, but not both.

Any suggestions? Thanks!

Answer 1

You can do this by defining the variable in this way-

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