在我的 Angular4 上使用 mdb 的透明导航栏

Question

我的 style.scss 导航栏

.navbar {
  background-color: transparent;
}
.top-nav-collapse {
  background-color: #3f51b5;
}
@media only screen and (max-width: 768px) {
  .navbar {
    background-color: #3f51b5;
  }
}

我的 home.component.html 以及我的 home.component.html 我的背景图片所在

header.masthead {
  position: relative;
  background: url("https://res.cloudinary.com/dn1b66xo5/image/upload/c_scale,q_auto:best,w_750/v1509987250/photo-1503767849114-976b67568b02_li9wxo.jpg") no-repeat fixed center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 8rem;
  padding-bottom: 8rem; }
header.masthead h1 {
  font-size: 2rem; }
@media (min-width: 768px) {
  header.masthead {
    padding-top: 12rem;
    padding-bottom: 12rem; }
  header.masthead h1 {
    font-size: 3rem; } }

<header class="masthead h-75 text-white text-center">
  <div class="overlay"></div>
  <div class="container">
    <div class="home-info">
      <h1 class="cover-heading">Welcome to Noodles Hub</h1>
      <p class="lead">Order your delicious meals from your <strong><b>HALLS AND OFFICES</b></strong>.</p>
      <p class="lead">
      <a routerLink="/products" class="btn btn-lg btn-success">Select Restaurant</a>
      </p>
    </div>
  </div>
</header>

我的导航栏component.html

<nav>
  <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar top-nav-collapse" [containerInside]="false">
    <logo><a class="navbar-brand" routerLink="/">Noodles Hub</a></logo>
    <links>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
          <a routerLink="/" class="nav-link waves-light" mdbRippleRadius>Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link waves-light" mdbRippleRadius routerLink="/shopping-cart">
            <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
            <span class="badge badge-warning badge-pill" *ngIf="cart$ | async as cart">
        {{ cart.totalItemsCount }}
        </span>
          </a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto nav-flex-icons">
        <li class="nav-item"routerLinkActive="active">
          <a routerLink="/restaurants" class="nav-link waves-light">Restaurants</a>
        </li>
        <ng-template #anonymousUser>
          <li class="nav-item" routerLinkActive="active">
            <a class="nav-link waves-light" routerLink="/login">Login <i class="fa fa-user-plus" aria-hidden="true"></i></a>
          </li>
        </ng-template>
        <li *ngIf="appUser; else anonymousUser" class="nav-item dropdown" dropdown routerLinkActive="active">
          <a *ngIf="appUser.name"  class="nav-link dropdown-toggle waves-light"  dropdownToggle  mdbRippleRadius>{{ appUser.name }}</a>
          <a   *ngIf="!appUser.name" class="nav-link dropdown-toggle waves-light" dropdownToggle   mdbRippleRadius>Welcome</a>
          <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
            <a class="dropdown-item waves-light" mdbRippleRadius routerLink="/my/orders">My Orders</a>
            <ng-container *ngIf="appUser.isAdmin">
              <a class="dropdown-item waves-light" mdbRippleRadius routerLink="/admin/orders">Manage Orders</a>
              <a class="dropdown-item waves-light" mdbRippleRadius routerLink="/admin/restaurants">Manage Products</a>
            </ng-container>
            <div class="divider dropdown-divider"></div>
            <a mdbRippleRadius (click)="logout()" class="dropdown-item waves-light">Log Out</a>
          </div>
        </li>
      </ul>
    </links>

  </mdb-navbar>
</nav>

来自 Mdb 的标记实际上有效，但我遇到的问题是我的导航栏是一个不同的组件，因此背景图像不与导航栏重叠

Answer 1

问题是我的应用程序有一个默认的 80px 主体内边距，所以我所做的就是删除顶部内边距并且它现在工作正常

在我的 Angular4 上使用 mdb 的透明导航栏

transparent navbar using mdb on my Angular4

angular-ui-bootstrap

bootstrap-material-design

angular