时间戳

首页 > 解决方案 > Angular Material中带有菜单的完整背景图像

angular - Angular Material中带有菜单的完整背景图像

问题描述

此示例不起作用，如何将此图像应用于全屏背景？对于内容块background-image作品，我不能申请background-image导航。

.menu-spacer {
  flex: 1 1 auto;

}

.bg{
  width: 100%;
  height: 100%;
  background: url('https://images.unsplash.com/photo-1497091071254-cc9b2ba7c48a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80') no-repeat center;
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
<div style="height: 80vh" class="bg" >
  <mat-toolbar  >
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <i class="material-icons">
          pets
        </i>

      </button>
      <span class="menu-spacer"></span>
      <div fxShow="true" fxHide.lt-md >
        <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      </div>
    </mat-toolbar-row >
  </mat-toolbar>
  <mat-sidenav-container fxFlexFill >
    <mat-sidenav #sidenav >
      <mat-nav-list>

      </mat-nav-list>
    </mat-sidenav>
  </mat-sidenav-container>

</div>

标签： angularangular-material

解决方案

如果我得到你想要的，你需要将样式添加到.mat-toolbar类中以使其工作。

.mat-toolbar {
  background: url('https://images.unsplash.com/photo-1497091071254-cc9b2ba7c48a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80') no-repeat center;
  background-size: cover;
  color: #fff;
}

请参阅此StackBlitz 示例。

它甚至可以与多行工具栏一起使用。

推荐阅读