Ionic 4 - 如何将模态背景更改为透明？

Question

我正在尝试创建一个具有透明背景的模态，但它不起作用

 ion-content { --background-color: rgba(255, 255, 255, 0.7); } .closeBtn { position: absolute; bottom: 0px; left: 0px; right: 0px; }

 <ion-content padding> <h3 class="ion-text-center"> <strong>Test.</strong> </h3> <ion-button class="closeBtn" color='light' fill='clear'>Close</ion-button> </ion-content>

我希望看到一些透明度。

Answer 1

全局文件

.modal-wrapper{
    background: transparent !important;
}

页面.scss

ion-content{
    --background: transparent;
}

Answer 2

也许只是：

ion-content {
 background-color: rgba(255, 255, 255, 0.7);
}

Answer 3

您可以通过更改ion-modal --ion-background-color变量来ion-modal ：

ion-modal {
  --ion-background-color: #ffffff85;
}

Answer 4

global.scss

.modal-wrapper, .inner-scroll {
  background: transparent !important;
}

你的页面.scss

ion-content {
 --background: transparent !important;
}

Answer 5

您可以将 css 类应用于您的模态（此处为 phone-modal），然后覆盖 global.scss 中的离子基本样式

        const modal = await this.modalCtrl.create(
        {
            component: PhoneContactModalComponent,
            cssClass: 'phone-modal'
        });

global.scss ：

.phone-modal {
    padding: 35vh 30px 20vh 30px;
    background: rgba(0, 0, 0, 0.5);
}
.sc-ion-modal-md-h {
    --background: none;
}
.sc-ion-modal-ios-h {
    --background: none;
}