我正在使用 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]+')'}"
所以我的问题是我怎样才能更正第一个代码以获得图像?
最佳答案
我认为该值被分配为一种样式,但浏览器在它无效时将其删除。
举个例子:
<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>
关于javascript - 具有颜色叠加语法的动态背景图像 - Angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50938415/