Как установить фоновое изображение в div-элементе в приложении Angular Material? - PullRequest
Новая
       6

Как установить фоновое изображение в div-элементе в приложении Angular Material?

0 голосов
/ 30 января 2019

Я знаю, что об этом спрашивали, но ни одно из решений не работает.У меня есть следующий HTML, и я могу отобразить изображение, если я использую закомментированный img-элемент 

<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;
 }

Если я изменю путь выше, будет ошибка.

1 Ответ

0 голосов
/ 30 января 2019

Вам нужно указать размер вашего div.Следующий код отобразит изображение на весь экран. 

html, body {
  height: 100%;
}

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