ionic 2，背景图片后的内容不覆盖所有页面答案

【问题标题】：ionic 2, content after background image doesn't cover all pageionic 2，背景图片后的内容不覆盖所有页面
【发布时间】：2017-04-04 20:37:02
【问题描述】：

在我的 ionic 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;  
    }

【问题讨论】：

您可能需要从.content-md 或.onboardingcontent::after 类中删除padding 或margin
其实这些元素上的 padding 和 margin 都设置为 0...

标签： css angular ionic2

【解决方案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 使用它

【讨论】：

我的想法是，我需要在图像下方添加一个黑色层，因为图像具有不透明度：0.3
您可以将背景颜色添加到您的离子内容中，在其上生成滚动类
好的，我明白了，但是如果我将不透明度设置为 scoll-content，我的所有内容都是不透明的