Я хочу использовать фоновое изображение в моем Angular login.Component.ts, но это не показывает - PullRequest
Новая
       19

Я хочу использовать фоновое изображение в моем Angular login.Component.ts, но это не показывает

0 голосов
/ 01 ноября 2019

Это мой HTML Div, в котором я хочу использовать фоновое изображение 

<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');

    }

Ответы [ 2 ]

0 голосов
/ 01 ноября 2019

Ваш HTML-код недействителен:

Вот как он начинается: 

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

И вот как он заканчивается: 

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

Начните с исправления этогопервый. Также убедитесь, что ни у одного из вложенных дочерних элементов не установлены цвета фона. Вы не сможете увидеть полное изображение самого внешнего контейнера, если у внутреннего установлен задний фон.

0 голосов
/ 01 ноября 2019

Попробуйте это от: 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>
...