Html 以角度更改url的背景

你好

我试图在单击按钮后更改我的背景url。默认情况下，我的css上有这种样式

.whole-container {
    background: linear-gradient(
                               rgba(0, 0, 0, 2.5),
                               rgba(0, 0, 0, 2.5)
    ), url('link-with-random-image') no-repeat center center fixed;

我的示例HTML如下所示：

<div class="whole-container">
    ....
</div>

app.component.ts

changeBg(){
    this.wholeContainerStyle = "linear-gradient(rgba(0, 0, 0, 2.5),rgba(0, 0, 0, 2.5)),url('link-with-random-image') no-repeat center center fixed;"
}

但是背景图像没有改变

---

有什么帮助吗？

如果需要在两种不同的样式之间切换，可以使用指令

CSS

控制器

export class AppComponent {
  defaultStyle = true;
  ...
}

模板

...
不幸的是，在我触发
isDefaultStyle
来改变其行为之后，背景图像和样式都没有改变。其中一个原因是渐变完全遮住了图像。尝试不同的值。我在回答中包含了一个工作示例。您好，它在stackblitz中工作，但在我身上不工作，因为我有用于背景图像的相同url。我从相同的链接获取背景图像，但随机results@JokerBench例如我不太明白这个要求。你能提供一个最低限度的闪电战吗？
.whole-container-1 {
  background: 
    linear-gradient(rgba(0, 0, 0, 2.5), rgba(0, 0, 0, 2.5)), 
    url('link-with-random-image') no-repeat center center fixed;
}

.whole-container-2 {
  background: 
    linear-gradient(rgba(0, 0, 0, 2.5), rgba(0, 0, 0, 2.5)), 
    url('other-link-with-random-image') no-repeat center center fixed;
}

export class AppComponent {
  defaultStyle = true;
  ...
}