Question

我正在使用离子3角度来构建我的应用程序。因此，作为一项要求，我在所有页面上全局拥有背景图像。为此我将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;
>

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

1 个答案: