離子2，背景圖像後的內容不包括所有頁面

在我的離子2應用程序，我想在頁面上放置背景圖像。離子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; 
    }

來源

2017-04-04 Louis

你可能需要刪除'padding'或'm從'.content-md'或'.onboardingcontent :: after' class – 2017-04-04 11:30:44

實際上，這些元素的填充和邊距都設置爲0 ... – Louis

添加背景圖片到.scroll內容，就像這樣：

.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

來源

2017-04-04 12:37:02

思考是，我需要圖像下方的黑色圖層，因爲該圖像具有不透明度：0.3 – Louis

您可以將背景色添加到離子內容中，滾動類會在其上生成 –

ok我明白了，但是如果我將不透明度設置爲scoll-content，則我的所有內容都是不透明的 – Louis

離子2，背景圖像後的內容不包括所有頁面

回答

相關問題