时间戳

首页 > 解决方案 > 如何为Angular中的两个不同组件提供背景图像？

html - 如何为Angular中的两个不同组件提供背景图像？

问题描述

我正在尝试实现这个设计：

Sonido登陆页面

正如您所看到的，有一个背景图像覆盖了导航栏及其下方的内容。问题是，在我的代码中，导航栏是与其下方内容分开的组件，我不知道如何让这个背景成为这两个组件的背景。

这是我的main-layout.component.html代码：

<navbar></navbar>
<main>
  <router-outlet></router-outlet>
</main>

这是路由器插座中加载的内容：

<hero-content></hero-content>
<general-information></general-information>
<contact-us></contact-us>
<footer></footer>

我需要背景图像覆盖后面<navbar>和<hero-content>组件。

标签： htmlcssangular

解决方案

创建一个

<div>
    // inside div tag add background image with url based condition
    <navbar></navbar>
    <main>
        <router-outlet></router-outlet>
    </main>
</div>

推荐阅读