Question

我正在尝试将0.08的不透明度从0.33更改为ion-backdrop { opacity: 0.33 !important; }。

我试过了：

$popover-ios-background: rgba(0, 0, 0, 0.33);

并设置ion-backdrop。

在library(zoo) res <- expand.grid(Date = unique(df$Date), Ticker = unique(df$Ticker)) res2 <- merge(res, df, all.x = TRUE) res2 <- res2[order(res2$Ticker, res2$Date),] res3 <- na.locf(res2) res3[order(res3$Date, res3$Ticker),] # Date Ticker Open High Low Close Volume #1 2015-10-26 ANZ 29.11 29.17 28.89 28.90 6350170 #3 2015-10-26 CBA 77.89 77.93 77.37 77.50 2251288 #5 2015-10-26 NAB 32.69 32.76 32.42 32.42 3804239 #6 2015-10-26 WBC 31.87 31.92 31.71 31.84 5597684 #2 2015-10-27 ANZ 29.05 29.08 28.90 28.94 5925519 #4 2015-10-27 CBA 77.61 78.10 77.54 77.74 2424679 #8 2015-10-27 NAB 32.69 32.76 32.42 32.42 3804239 #7 2015-10-27 WBC 31.84 31.95 31.65 31.77 5448863上设置值确实有效，但由于它很重要，因此不会为淡出效果设置动画。

如何更改背景的不透明度？

Answer 1

我知道我参加这个聚会有点晚了，但是现在有了Ionic 5，您就有了一个CSS选择器可以为您完成这项工作。 their documentation中也提到了这一点。

因此，基本上您所能做的就是，初始化模态并在SCSS文件中设置其样式。

这是我的 component.ts 文件：

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
// ModalComponent is just a normal angular component, your path may vary
import { ModalComponent } from '../../modals/modal.component';

@Component({
  selector: 'some-component',
  templateUrl: './some-component.component.html',
  styleUrls: ['./some-component.component.scss']
})
export class SomeComponentComponent {
  constructor(
    private modalController: ModalController,
  ) { }

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalComponent,
      cssClass: 'modal-class'
    });

    return await modal.present();
  }
}

和我的 component.scss 文件：

.modal-class {
  ion-backdrop {
    --backdrop-opacity: 0.33;
  }
}

Answer 2

Ionic的GitHub当前有一个open issue。那里列出的唯一不会破坏动画的解决方法是漫长而复杂的-在此无法列出。指向解决方案的直接链接：https://github.com/ionic-team/ionic/issues/9105#issuecomment-375010398

Answer 3

我已经使用alertController（Ionic 4）中的cssClass属性做到了

  async alertError(message: string) {
    const alert = await this.alertController.create({
      cssClass: 'alertClass',
      animated: true,
      header: 'Error',
      message,
      buttons: ['OK']
    });
    await alert.present();
  }

 ion-alert {
   &.alertClass{
     background: rgb(0,0,0,.8);
   }
 }

Answer 4

我猜这个ion-backdrop问题与离子警报控制器有关。如果是这种情况，则需要在global.scss文件中应用CSS。这是必需的，因为ion-backdrop作为 Ionic全局组件存在于应用中。

因此在您的Ionic项目中找到了提到的文件。通常在此目录 app> src> global.scss 中。

现在，让我们假设在某个页面类中实例化了此 Alert Controller 。

...
async serviceErrorAlert() {

    const alert = await this.alertController.create({
      cssClass: 'try-again-alert',
      ...
    });

    await alert.present();
}
...

如您所见，警报控制器具有一个CSS类try-again-alert。因此，要添加所有想要的自定义CSS，只需转到global.scss文件并添加自己的样式即可。

.try-again-alert {
    background: rgba(55, 67, 77, 0.9);
}

我强烈建议您使用CSS的background属性和rgba()属性。通过这种方法，您现在可以选择所需的颜色（前三个数字）和颜色的不透明度（第四个数字）。

Answer 5

我只能在 Ionic 5 中通过使用具有所需 alpha 值的 checkAll.addEventListener("click", (event) => toggleAll(event, "check")); uncheckAll.addEventListener("click", (event) => toggleAll(event, "uncheck")); 属性来做到这一点。

调用模态的页面

background: rgba()

openModal(): Promise<void> { return this.modalCtrl.create({ component: ModalPage, backdropDismiss: true, cssClass: 'custom-class' }).then(modal => { modal.present(); }); }

app/theme/variable.css

改变离子背景不透明度？

5 个答案: