Question

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

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

我尝试使用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

您可以使用图片标签方法，并为z-index标签分配比其余内容更低的img

<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>

尝试使用背景图像在“身体”标签上添加图像，并使用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 或任何其他组件均未更改；

您可以检查working stackblitz here

滚动条由于背景图像而消失

3 个答案: