javascript - 滚动条因背景图片而消失

Question

我是一名新手，我正在尝试构建一个网页，该网页在整个应用程序中都有一个背景图片。

问题是，当我在登录页面之后进一步移动应用程序时，有一个名为 family details 的页面，该页面具有可滚动的内容，但由于背景图像，滚动条确实没出现。

我试过使用 image 标签 而不是使用背景图片，但是内容并没有出现在图片上方，而是出现在图片下方。

App.component.html

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

样式.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>