Angular Material应用中如何为div元素设置背景图片？

我来帮你搞定这个问题！你遇到的情况其实很常见：<img>标签能正常加载图片，但用background-image设置的背景图却看不到，而且路径没问题（改路径会出404），核心原因大概率是你的.bgimg容器没有设置尺寸。

为什么会这样？ #

<img>标签本身会根据图片的固有尺寸自动撑开自身的宽高，所以图片能显示出来；但<div>这类块级元素，如果没有内容或者明确的宽高设置，默认只会收缩到内容的大小——你的.bgimg里只有一个浮动的.testclass，容器本身没有被撑开，背景图自然没有可以显示的空间。

解决方案：给容器添加尺寸设置 #

修改你的CSS，给.bgimg明确指定宽高，或者让它占满可用的布局空间。比如适配你的Angular Material布局，可以这样写：

.testclass { float: right; }
.bgimg {
  background: url('../../assets/utgmap.jpg') no-repeat center center fixed;
  /* 设置容器宽度为100% */
  width: 100%;
  /* 计算高度：视口高度减去顶部toolbar的默认高度（64px） */
  height: calc(100vh - 64px);
  /* 可选：让背景图覆盖整个容器，避免拉伸变形 */
  background-size: cover;
}

额外检查点 #

• 确认.bgimg没有被其他元素设置display: none或者visibility: hidden
• 如果背景图还是不显示，可以尝试去掉fixed属性，换成background-attachment: scroll试试（fixed定位可能会有布局层级的问题）
• 检查.bgimg是否有padding或者margin导致容器被挤压，影响背景图显示范围

你的原始代码参考 #

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>
</mat-sidenav-container>

原始CSS代码

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

内容的提问来源于stack exchange，提问作者char m