内联CSS到Angular 2 - 线性渐变到背景图像

Question

我有通常的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');
}

在上面，我需要移动

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');

内联样式。我试着这样做：

更新：

<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>

但是，这不起作用。它选择了正确的样式，然而，它无法找到组件中定义的backgroundUrl。

解答：

好的，发现了错误。只需要使用它如下：

<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>

Answer 1

我认为问题在于添加了网址。 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\')'}"  

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

Answer 2

我猜你错过了一些“'”

<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(\'../assets/img/background.png\')}'">

我不确定这个（逃避） - ＆gt; ... \ '../资产/ IMG / background.png \' ...

您可以尝试将其移至变量，例如

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