离子 3 在离子含量上创建半透明覆盖层

Question

我正在使用Ionic 3 Angular来构建我的应用程序。因此，作为一项要求，我在所有页面上都有全局背景图像。为此，我将app.scss修改为：

.app-bg{
background-image: url('../assets/images/background.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}

这用于离子含量，例如：

<ion-content padding class="app-bg" >

现在在某些页面上，我需要一个半透明层来提高实际内容的可见性。

那么，我该怎么做呢？ 我尝试使用一些样式表添加另一个背景，例如

<ion-content padding text-center  class="app-bg" style="background-image: url('assets/images/overlay.png');display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: hsla(0,0%,100%,0.70);
background-blend-mode: overlay;
background-repeat: no-repeat;">

但这似乎不起作用

Answer 1

应该这样做：

<ion-content 
.....
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0; 
width: 100vw;
height: 100vh;
>