如何在Angular中添加透明的背景图片到整个页面？

Question

我试着把背景图片放在整个页面上。此外，背景应涵盖材料数据表。做这件事最好的方法是什么？背景也应该是透明的，这样你就可以阅读表格的内容。

下面是添加背景图片的代码: HTML：

<div class="image">
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <img src="assets/{{img_source}}" alt="img_source" title="img_source" width="25%" height="100%"> // not important
    </mat-toolbar-row>
  </mat-toolbar>

  <app-coffee-information></app-coffee-information>
</div>

CSS：

.image {
  height: 45em;
  background-size: cover;
  width: auto;
  background-image: url('../assets/Unknown.jpg');
  background-position: 50% 50%;
}

​

​

将高度更改为：height: 100%;时，如下所示：

​

​

Answer 1

一个带有class="modal“的div应该可以做到这一点。

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    opacity:.5;
    background-color:transparent;
    background-image: url('../assets/Unknown.jpg');
}

Answer 2

问题出在你的CSS上。变化

.image{
height: 45rem
...
}

至

.image{
height: 100%
...
}