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

global.css

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

page.scss

ion-content{
    --background: transparent;
}

Answer 3

global.scss

  <label>Date</label>
  <div class="input-group date">
 <input type="text" class="form-control pull-right" id="Date">
 <div class="input-group-addon">
 <i class="fa fa-calendar"></i>
 </div>
 </div>

您的page.scss

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

Answer 4

您可以通过更改--ion-background-color的{{1}}变量来做到这一点：

ion-modal

Answer 5

您可以将CSS类应用于模态（这里是电话模态），然后在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;
}

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

5 个答案: