如何在 Angular Material 应用程序的 div 元素中设置背景图像? [英] How to set background image in div-element in Angular Material app?

问题描述

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

，我可以显示图像

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

HTML:

<mat-sidenav #drawer class="sidenav" fixedInViewport="true"[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"[mode]="(isHandset$ | async) ? 'over' : 'side'"[opened]="!(isHandset$ | async)"><mat-toolbar>菜单</mat-toolbar><mat-nav-list><a mat-list-item href="#">链接 1</a><a mat-list-item href="#">链接2</a><a mat-list-item href="#">链接 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>菜单</mat-icon><span>webgisproto</span><按钮垫图标按钮><mat-icon>设置</mat-icon><按钮垫图标按钮><mat-icon>help_outline</mat-icon><button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>exit_to_app</mat-icon><mat-menu #menu="matMenu"><button mat-menu-item (click)="logout()"><mat-icon>exit_to_app</mat-icon><span>退出</span></mat-menu></mat-toolbar-row></mat-toolbar><app-menu></app-menu><!-- 这有效！！<img src="assets/utgmap.jpg">如果我取消注释并注释掉以下 DIV --><div class="bgimg"><div class="testclass"><mat-list color="primary"><mat-list-item><按钮垫图标按钮><mat-icon>设置</mat-icon></mat-list-item><mat-list-item><按钮垫图标按钮><mat-icon>help_outline</mat-icon></mat-list-item></mat-list>

</mat-sidenav-content>

CSS:

.testclass {浮动:对；}.bgimg {背景:url('../../assets/utgmap.jpg') 无重复中心中心固定；}

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

解决方案

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

html, body {高度:100%；}.bgimg {显示:块；宽度:100%；高度:100%；背景:url('../../assets/utgmap.jpg') 无重复中心中心固定；}

I know this has been asked, but none of the solutions work. I have following html and I can get the image displayed if I use the commented img-element

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

and comment away the following div-element. However I would like to have background image for the div instead and it's not working. CSS definition is in the end of the file and there's no 404 error for the image so it can be fetched but is is not displayed.

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

If I change the path above there will be error.

解决方案

You need to set a dimension to your div. The following code will display the image in full screen.

html, body {
  height: 100%;
}

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

这篇关于如何在 Angular Material 应用程序的 div 元素中设置背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！