将背景图像添加到mat-dialog

Question

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

然后我添加了此CSS，将背景图像放入了无光对话框。

.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

我设法通过更改工作方式来解决问题，有时候，更改方法比尝试找到遇到问题的解决方案更容易。

我所做的如下。

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

因此，我将.mat-dialog-container填充修改为0，以便内容div可以使用完整的height and width，然后将background-image添加到内容div。

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

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