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

也许只是：

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

Answer 2

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

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

Answer 3

您可以只将 css class 应用到您的模态（此处为 phone-模态），然后覆盖 global.scss[=12 中的离子基本样式=]

        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;
}

Answer 4

global.css

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

page.scss

ion-content{
    --background: transparent;
}

Answer 5

global.scss

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

你的page.scss

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

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

Ionic 4 - How to change modal background to transparent?

html

css

ionic-framework

ionic4