改变离子背景不透明度？答案

【问题标题】：Change ion-backdrop opacity?改变离子背景不透明度？
【发布时间】：2018-08-24 19:01:18
【问题描述】：

我正在尝试将 ion-backdrop 的不透明度从 0.08 更改为 0.33。

我试过了：

ion-backdrop {
  opacity: 0.33 !important;
}

并设置$popover-ios-background: rgba(0, 0, 0, 0.33);。

在ion-backdrop 上设置值确实有效，但由于它很重要，它不会为淡出设置动画。

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

【问题讨论】：

你把你的css放在app.scss中了吗？
@Duannx 是的，我做到了..
所以它必须工作。您可以在 stackblitz.com 上重现您的问题吗？

标签： css ionic-framework ionic3 ionic-native

【解决方案1】：

目前在 Ionic 的 GitHub 中有一个 open issue 与此相关。那里列出的唯一不会破坏动画的解决方法是冗长而复杂的 - 太多了，无法在此处列出。解决方案的直接链接：https://github.com/ionic-team/ionic/issues/9105#issuecomment-375010398

【讨论】：

【解决方案2】：

我已经使用 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);
   }
 }

【讨论】：

【解决方案3】：

我知道我参加这个聚会有点晚了，但是现在有了 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;
  }
}

【讨论】：

【解决方案4】：

我猜这个ion-backdrop 问题与离子警报控制器有关。如果是这种情况，您需要在 global.scss (Ionic 3) 文件或 theme\variable.scss (Ionic 4/5) 中应用 CSS。这是必需的，因为ion-backdrop 作为Ionic 全局组件 存在于应用程序中。

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

现在假设我们在某个页面类中实例化了这个警报控制器。

...
async serviceErrorAlert() {

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

    await alert.present();
}
...

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

global.scss（离子 3）：

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

theme\variable.scss（离子 4/5）：

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

【讨论】：

【解决方案5】：

我只能在 Ionic 5 中通过使用具有所需 alpha 值的 background: rgba() 属性来做到这一点。

调用模态的页面

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

    }).then(modal => {
        modal.present();
    });
}

app/theme/variable.css

.custom-class {
    background: rgba(0,0,0,0.8); /*black with 0.8 opacity*/ 
}

【讨论】：