我想在我的Angular登录中使用背景图像.Component.ts，但没有显示

Question

这是我的htmldiv，我想在其中使用背景图像

<div class="bg-img">
<div class="container">
<form [formGroup]="loginForm" class="form-horizontal" (ngSubmit)="onSubmit()">
<div class="panel panel-primary pb-3">
<div class="panel-heading">
<h3 class="panel-title">Instrutors Login Form</h3>
</div>
<div class="pane-body">
<div class="form-group ">
<label class="col-sm-2 control-label" for="username">User Name:</label>
<div class="col-md-8">
<input type="text" id="username" formControlName="username" class="form-control" ng-model="mymdl">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="password">Password:</label>
<div class="col-md-8">
<input type="password" id="password" formControlName="password" class="form-control">
</div>
</div>
<div class="panel-footer">
<button type="submit">login</button> <p> <a routerLink="/register">Signup</a></p>
</div>
</div>
</div>
</form>
</div>

这是我的login.component.css文件，使用类"bg-img"的引用在后台中使用图像

.bg-img{
background-image: url('/src/assets/images/img1.jpg');
}

Answer 1

您的HTML无效：

它就是这样开始的：

<div class="bg-img">
<div class="container">
<form [formGroup]="loginForm" class="form-horizontal" (ngSubmit)="onSubmit()">

这就是它的结局：

</div>
</form>
</div>

首先要解决这个问题。还要确保嵌套的子对象都没有设置背景颜色。如果内部容器有一个固定的背景，您将无法看到最外部容器的完整图像。

Answer 2

请从以下位置尝试：https://www.w3schools.com/howto/howto_css_image_text.asp

/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="../../../assets/images/DebraFacebook.jpg" alt="DebraFacebook" style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>