离子2，背景图像后的内容并不覆盖所有页面

Question

在我的离子2应用中， 我想在页面上放一个背景图片。

视图包含幻灯片，但我希望将背景固定在幻灯片后面。

它几乎正常工作，除了顶部的黑线似乎没有被背景覆盖。

在我的page.scss文件中：

page-onboarding {

    .onboardingcontent, .onboardingcontent.content-md {
        // background-color: black;
        background-color: black !important;
        color: white;
    }
.onboardingcontent::after {
        content:"";
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        background-image: url(../img/LouisRomainSpeed.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        opacity: 0.3;
        // z-index: 1;  
    }

Answer 1

将背景图像添加到.scroll-content，如下所示：

.scroll-content {
    content:"";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    background-image: url(../img/LouisRomainSpeed.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}

您可以在scroll-content或fixed-content

使用它