如何在 Angular Material 应用程序的 div 元素中设置背景图像？答案

【问题标题】：How to set background image in div-element in Angular Material app?如何在 Angular Material 应用程序的 div 元素中设置背景图像？
【发布时间】：2019-02-04 00:52:36
【问题描述】：

我知道有人问过这个问题，但没有一个解决方案有效。我有以下 html，如果我使用带注释的 img-element

，我可以显示图像

<img src="assets/utgmap.jpg">

并注释掉下面的 div 元素。但是，我想为 div 设置背景图像，但它不起作用。 CSS 定义在文件末尾，并且图像没有 404 错误，因此可以获取但不显示。

HTML：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
  [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
  [mode]="(isHandset$ | async) ? 'over' : 'side'"
  [opened]="!(isHandset$ | async)">
  <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <button mat-icon-button (click)="toggleSidenav.emit()">
        <mat-icon>menu</mat-icon>
      </button>
      <span>webgisproto</span>
      <button mat-icon-button>
        <mat-icon>settings</mat-icon>
      </button>
      <button mat-icon-button>
        <mat-icon>help_outline</mat-icon>
      </button>
      <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>exit_to_app</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="logout()">
            <mat-icon>exit_to_app</mat-icon>
            <span>Sign out</span>
          </button>
      </mat-menu>
    </mat-toolbar-row>
  </mat-toolbar>
  <app-menu></app-menu>
  <!-- THIS WORKS!!
  <img src="assets/utgmap.jpg">
  IF I UNCOMMENT THIS AND COMMENT OUT THE FOLLOWING DIV -->
  <div class="bgimg">
    <div class="testclass"> 
        <mat-list color="primary">
          <mat-list-item> 
              <button mat-icon-button>
                  <mat-icon>settings</mat-icon>
                </button>
          </mat-list-item>
          <mat-list-item>
              <button mat-icon-button>
                  <mat-icon>help_outline</mat-icon>
                </button>
          </mat-list-item>
        </mat-list>
      </div>
    </div>
 </mat-sidenav-content>

CSS：

.testclass {
   float: right;
}

.bgimg {
    background: url('../../assets/utgmap.jpg') no-repeat center center fixed;
 }

如果我改变上面的路径会出错。

【问题讨论】：

标签： html css angular angular-material background-image

【解决方案1】：

您需要为您的 div 设置一个维度。以下代码将全屏显示图像。

html, body {
  height: 100%;
}

.bgimg {
  display:block;
  width:100%;
  height:100%;
  background: url('../../assets/utgmap.jpg') no-repeat center center fixed;
}

【讨论】：