內聯CSS到角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');

內聯造型。我想，如下做到這一點：

UPDATE：

<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

我猜你錯過了一些 「'」

<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\')}'"> 

我不知道這（退出） - > ... \ '../資產/ IMG/background.png \' ...

你可以嘗試將其移動到變量一樣，

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

---

Answer 2

我認爲問題是與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\')'}" 

它確實顯示爲內聯。我附上了它的截圖。