将背景图像添加到 mat-dialog

Question

我正在尝试将背景图像添加到 mat-dialog，通过在 mat-dialog 文档上花费一些时间，我意识到我可以使用panelClass: 'my-class'来自定义 mat-dialog 外观，在这里my-class最终得到应用于在 mat-dialog 中具有类cdk-overlay-pane div，类似这样。

然后我添加了这个 css 来将背景图像放在 matt-dialog 中。

.my-class .mat-dialog-container {
  background: url("assets/illustrations/abc.svg") no-repeat;
  padding-bottom: 16px !important;
}

.my-class {
  // background: white !important;
  border-radius: 10px;
}

最终 mat-dialog 最终看起来像这样，具有透明背景。

为了解决这个问题，我最终添加了background: white; 到my-class ，然后它看起来像这样。

一切似乎都运行良好，但是一旦我关闭对话框，它就会出现问题，相同大小的白色背景会持续几毫秒，然后消失。

Answer 1

我设法通过改变我做事的方式来解决这个问题，有时改变方法比试图找到你遇到的情况的解决方案更容易。

我所做的如下。

在附加的图像 div 中， class='content表示对话框的内容，因此它基本上是一个div ，我们将其放置为要在 mat-dialog 中显示的内容的包装器，在我的情况下，我将其命名为content 。

所以我将.mat-dialog-container padding 修改为0，这样content div 就可以取全height and width全height and width ，然后将background-image添加到content div 中。

.my-class .mat-dialog-container {
  padding: 0px !important;
}

最终结果可以在下面提到的图像中看到。