离子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-background-color变量来做到这一点ion-modal：

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

Answer 2

global.css

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

page.scss

ion-content{
    --background: transparent;
}