如何设置DIV元素的背景图像中角材质的应用程序?

问题描述 投票:1回答:1

我知道这已经被问过,但没有一个解决方案的工作。我有以下的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;
 }

如果我改变上述路径会出现错误。

html css angular angular-material background-image
1个回答
2
投票

你需要一个尺寸设为您的股利。下面的代码将全屏显示该图像。

html, body {
  height: 100%;
}

.bgimg {
  display:block;
  width:100%;
  height:100%;
  background: url('../../assets/utgmap.jpg') no-repeat center center fixed;
}
© www.soinside.com 2019 - 2024. All rights reserved.