Question

在我的Ionic应用程序中，我有一个模态视图。我希望它的背景是一个CameraPreview块，但是当我将toBack属性设置为true时，它无效。

这是我的cameraOptions：

public cameraPreviewOpts: CameraPreviewOptions = {
 x: 0,
 y: 0,
 width: window.screen.width,
 height: 300,
 camera: 'rear',
 tapPhoto: true,
 previewDrag: false,
 toBack: true,
 alpha: 1
};

当我将toBack设置为false时，cameraPreview工作正常但我想访问我的导航栏和预览上方的一些按钮，所以我需要找到在这里不起作用的内容。

如果需要，我很乐意为您提供更多信息。谢谢！

Answer 1

你确定它没有隐藏在另一个HTML元素后面吗？

你试过设置背景颜色吗？

html, body, .ion-app, .ion-content { background-color: transparent; }

Answer 2

将此添加到您使用相机的页面构造函数中。

document.body.style.backgroundColor = "transparent !important"

我在我的 variables.scss 和我尝试应用的所有地方使用了深色/浅色主题模式

html, body, .ion-app, .ion-content {
  background-color: transparent;
}

或

<ion-content [fullscreen]="true" [ngClass]="{'custom-ion-content': true}"> 

.custom-ion-content {   
   --background-color: transparent !important;   
}

根本没用。这为我解决了。

当toBack为true时，CameraPreview没有显示

2 个答案: