javascript - 具有颜色叠加语法的动态背景图像 - Angular

Question

我正在使用 Ionic(基于 Angular)，我想将图像设置为组件的背景，并在其上方叠加颜色。代码写入 .css 文件时是正确的，但是当它是动态的(我用变量替换值)时，我的语法似乎不正确。

这根本不会影响我的组件的背景:

[ngStyle] = "{'background': 'linear-gradient('+colors[test.number]+','+colors[0]+'),url(../assets/img/test-'+test.number+'.jpg)'}"

然而，这有效但没有将图像作为背景，只有颜色:

[ngStyle] = "{'background': 'linear-gradient('+colors[test.number]+','+colors[0]+')'}"

所以我的问题是我怎样才能更正第一个代码以获得图像？

Answer 1

我认为该值被分配为一种样式，但浏览器在它无效时将其删除。

举个例子:

<div [ngStyle]="{'background': 'fooBar'}"></div>

当我在 Angular 中运行上面的例子时。我在浏览器中看到了这个。

<div _ngcontent-c18="" ng-reflect-ng-style="[object Object]"></div>

当我使用 Chrome 的检查器时，该元素缺少 background 样式。

这告诉我 Angular 分配了无效的 CSS 样式但浏览器忽略了它。

这会引发一个问题，如果您的变量之一是 undefined。它可以是 colors、colors[test.number]、colors[0] 或 test.number。

尝试在组件上使用一个函数来生成样式对象，并将这个值记录到控制台以确保它是正确的。

public getBackground(start, end, num) {
    const style = {'background': `linear-gradient(${start},${end}),url(../assets/img/test-${num}.jpg)`};
    console.log(style);
    return style;
}

然后在模板中

<div [ngStyle]="getBackground(colors[test.number],colors[0],test.number)"></div>