我知道这已经被问过,但没有一个解决方案的工作。我有以下的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, body {
height: 100%;
}
.bgimg {
display:block;
width:100%;
height:100%;
background: url('../../assets/utgmap.jpg') no-repeat center center fixed;
}