ionic 3 在离子含量上创建半透明覆盖答案

【问题标题】：ionic 3 creating a semi transparent overlay on ion-contentionic 3 在离子含量上创建半透明覆盖
【发布时间】：2017-07-13 04:24:06
【问题描述】：

我正在使用 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;">

但这似乎不起作用

【问题讨论】：

标签： css angular ionic3

【解决方案1】：

应该做的伎俩：

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

【讨论】：