滾動條因背景圖像而消失

Question

我是一個新的蜜蜂，我正在嘗試建立一個在整個應用程序中都有背景圖像的網頁。

問題是當我在登錄頁面之后在應用程序中進一步移動時，有一個名為家庭詳細信息的頁面具有可滾動內容，但由於背景圖像，滾動條不會出現。

我嘗試過使用image tag而不是使用背景圖片，但內容沒有出現在圖片上方，它出現在圖片下方。

App.component.html

<div class="background-image">
    <router-outlet></router-outlet>
</div>

styles.css的

.background-image {
    background-image: url('assets/icf.jpg');
    background-position: center top;
    background-size: 100% auto;
}

帶圖片標簽

App.component.html

<img src="assets/icf.jpg" alt="/">
<router-outlet></router-outlet>

Answer 1

您可以使用圖像標記方法，並為img標記指定比其他內容更低的z-index

<img src="assets/icf.jpg" alt="/" style="z-index: 0;">
<div class ="all-your-other-stuff" style="z-index: 1;"></>

 .img{ background-image: url("https://dummyimage.com/200x200"); z-index: 0; height: 200px; width: 200px; } .content{ z-index: 1; }

 <div class="img"> <div class="content">TEXT ABOVE IMAGE</div>

Answer 2

 body { background-image: url('https://dummyimage.com/200x200'); height: 100%; width: 100%; }

 <html> <body> <p>Test data</p> </body> </html>

嘗試使用背景圖像在Body標簽上添加圖像，並使用css中的repeat-x，repeat-y屬性。

然后圖像將始終在背景中。

Answer 3

將圖像添加到index.html，並確保包含角度代碼的div具有更高的z-index; 相關index.html如下：

 <div class='bkgClass'>
    <div class='insideClass'>
        <my-app>loading</my-app>
    </div>
</div>

<style>
    .bkgClass {
        height: 100vh;
        width: 100vw;
        background: url("https://beta.akberiqbal.com/JumboMobT.JPG");
    }

    .insideClass {
        z-index: 1;
    }
</style>

不對app.component或任何其他組件進行更改;

你可以在這里查看一個有效的stackblitz

滾動條因背景圖像而消失

問題描述

3 個解決方案

解決方案1
0 已采納 2019-06-13 07:17:13

解決方案2
0 2019-06-13 07:29:05

解決方案3
0 2019-06-13 07:48:27

滾動條因背景圖像而消失

問題描述

3 個解決方案

解決方案1 0 已采納 2019-06-13 07:17:13

解決方案2 0 2019-06-13 07:29:05

解決方案3 0 2019-06-13 07:48:27

解決方案1
0 已采納 2019-06-13 07:17:13

解決方案2
0 2019-06-13 07:29:05

解決方案3
0 2019-06-13 07:48:27