Html 内联CSS到角度2-线性渐变到背景图像

我有通常的

css

样式，比如：

.main-body {
    height: stretch;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url('../assets/img/background.png');
}

在上面，我需要移动

背景图像：线性渐变（到底部，rgba（0,0,0,0.6）0%，rgba（0,0,0,0.6）100%），url（'../assets/img/background.png'）

内联样式。我试着做到以下几点：

<div class="container-fluid main-body" [ngStyle]="{'background-image': 'linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 100%), url('+backgroundUrl+')'}">
</div>

更新：

<div class="container-fluid main-body" [ngStyle]="{'background-image': 'linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 100%), url(backgroundUrl)'}">>
</div>

我猜你错过了一些“




我不确定这个（转义）->…\'../assets/img/background.png\'

您可以尝试将其移动到变量

 <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

。。。

我认为问题在于添加了url。Angular在内联背景图像中有一个奇怪的东西，需要向前斜杠和向后斜杠。在我自己的项目中，我补充道：

[ngStyle]="{'background-image': 'linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(\'assets/images/generic-car.jpg\')'}"  

它确实显示为内联的。我附上了它的截图

这一点非常接近，但是，url仍然没有被识别出来。我试图将其作为变量传递，但仍然不起作用。请参阅更新。
[ngStyle]="{'background-image': 'linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(\'assets/images/generic-car.jpg\')'}"