Question

我正在将Angular 6用于我的前端Web开发。我在styles.css文件中设置了这样的主要背景图片。

body {
    background: url('http://yesofcorsa.com/wp-content/uploads/2015/10/4468_guitar.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我的项目中有不同的组件，并且我试图覆盖或删除特定组件内人体的背景图像。例如，如果我有一个“ MartinList”组件，则尝试通过在martin-list-component.html中添加带有类的body标签并覆盖martin-list中的背景图像URL来覆盖/删除背景图像.component.css。但这仅改变了背景的一小部分。我有点理解为什么，因为我的棱角项目是这样构造的。

<body>
   <app-root>
      <app-nav></app-nav>
      <router-outlet></router-outlet>
   </app-root>
</body>

因此，我尝试的操作基本上是在路由器插座内添加一个新的body标签，该标签只会部分覆盖main标签的背景图像。我该如何解决这个问题？谢谢！

Answer 1

使用[style.background-image]="'url({{path}})'"而不是在style.css中添加背景属性。

创建服务并使用BehaviorSubject

您可以使用默认背景代替“。”。

private backgroundSource = new BehaviorSubject('');
bgObservable = this.backgroundSource.asObservable();

在主组件中使用上述服务和``

this.bgService.bgObservable.subscribe(res => this.path = res);

在每个组件中注册您的背景：

regBackgrond(bg) {
    this.backgroundSource.next(bg);
}

如何覆盖/删除不同组件中的主/家庭（身体）背景图像

1 个答案: