可以将背景图像添加到 ion-alert 中吗？答案

【问题标题】：Can a background image be added to ion-alert?可以将背景图像添加到 ion-alert 中吗？
【发布时间】：2020-02-06 05:47:57
【问题描述】：

我已尝试以下方法将背景图像添加到离子警报：

.md,.ios,.wp {
    page-landing {
      .custom-alert {
        background-color: #F35E5D !important;
        background: #F35E5D  !important;
        color: red !important;
        $alert-md-background-color: #F35E5D;
        $alert-ios-background: #F35E5D;
        --background: #fff url("../../../assets/img/match.png") no-repeat center center / cover;
      }}}

ion-alert {
    --background: #fff url("../../../assets/img/match.png") no-repeat center center / cover;
}

  async presentAlertConfirm() {
    const alert = await this.alertController.create({
      header: 'CONGRATULATIONS!',
      cssClass: 'custom-alert',
      message: '<strong></strong>!!!',
      buttons: [
        {
          text: 'Keep searching',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
          }
        }, {
          text: 'Send a message',
          handler: () => {
            return this.router.navigateByUrl('tabs/connections');
          }
        }
      ]
    });

    await alert.present();
  }

.css 是我在网上找到的一个不起作用的示例。有什么方法可以在警报中添加背景图片吗？

【问题讨论】：

你使用的是哪个离子版本？
那么，有几件事，page-landing 是一个类吗？如果是这样，请将其替换为 .page-landing。其次，是否需要嵌套 css 类，或者您可以尝试将 custom-alert 作为 css 中自己的（非嵌套）部分吗？
试过：.custom-alert { --background: #fff url("../../../assets/img/match.png") 无重复中心中心/封面； } 和 .custom-alert { ion-alert { --background: #fff url("../../../assets/img/match.png") 无重复中心中心/封面； } } 都没有工作
在这篇文章中找到了答案：stackoverflow.com/questions/55687695/…

标签： html css typescript ionic4

【解决方案1】：

警报唯一可用的 CSS 选项是 --background。所以你可以从中得到帮助。这是对相同的一点调整：

使用 variables.scss 进行以下更改

ion-alert
{
 --background: #ffffff url("../assets/imagename.png") no-repeat center !important;
}

#ffffff 用作后备颜色。你可以省略。

【讨论】：