如何在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%
...
}