css - ionic 3 在 ion-content 上创建半透明覆盖层

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 ，例如:

<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;
>