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>

具有颜色叠加语法的动态背景图片-角度

1 个答案: