背景僅適用於半頁

Question

我正在使用ngStyle設置我的應用程序的背景

像這樣<div [ngStyle]="{'background-image': 'url(' + photo + ')','height':'100%','width':'100%','margin':'0px'}" >

但是在我的由路由器出口加載的組件之一中，數據較少，只有一半頁面具有背景，其余所有其他頁面都很好。

如何解決這個錯誤。

數據較少的組件模板

<div *ngIf="visibleTournament">
  <div class = "row">
    <div *ngFor="let entry of competitionTeams | keys">
      <div class="col-md-4" (mouseleave)= "entry.hideme = false">
        <div>
          <div (click) = "entry.hideme = !entry.hideme" >
            <div class = "groupBox"><div class="placed"><h3><span class = "label label-warning">Group - {{entry.key}}</span></h3></div></div>
          </div>
          <div class="well box" [hidden] = "!entry.hideme">
            <table class="table">
              <thead class="thead-inverse">
              <tr>
                <th>#</th>
                <th>Team</th>
                <th>Played Games</th>
                <th>Points</th>
                <th>Goals</th>
                <th>GA</th>
                <th>GD</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let subValue of entry.value">
                <th scope="row">{{subValue.rank}}</th>
                <td><img class="img-thumbnail small" src="{{subValue.crestURI}}">{{subValue.team}}</td>
                <td>{{subValue.playedGames}}</td>
                <td>{{subValue.points}}</td>
                <td>{{subValue.goals}}</td>
                <td>{{subValue.goalsAgainst}}</td>
                <td>{{subValue.goalDifference}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

該組件的CSS文件

.avatar{
  width:30px;
  height:30px;
  margin-right: 10px;
  background: rgba(0,0,0,0);
  border: none;
}

.inline{
  display: inline-block;
  margin: 10px 20px;
}

.check{
  min-width: 500px;
}

.selector{
  cursor: pointer;
}
.placed{
  margin: 0 auto;
}

.box{
  /*position: absolute;*/
  text-align: center;
  background: #ccffda;
  padding: 10px 20px;
  max-width: 500px;
  border: darkgray 1px solid;
  z-index: 1;
}


.groupBox{
  /*position: relative;*/
  text-align: center;
  background: rgba(0,0,0,0.3);
  padding: 20px 20px;
  margin: 2px;
  border: darkgray 1px solid;
  cursor: pointer;
}

th {
  white-space: nowrap;
}

.col-md-4{
  margin-bottom: 80px;

}

.fix{
  position: absolute;
}

.group{
  /*background: rgba(0,0,0,0.4);*/
}
table th {
  font-weight: bolder;
  /*color:#49fb35;*/
}

.small{
  width:20px;
  height:20px;
  background: rgba(0,0,0,0);
  border: none;
}

對於Ref我的應用程序組件

<div  [ngStyle]="{'background-image': 'url(' + photo + ')','height':'100%','width':'100%','margin':'0px'}" >
  <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" routerLink = "home">Football Data</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>

  <div class = "container">
    <div class = "row">
      <div class = "col-md-12">
        <div *ngIf="loading">
          <!-- show something fancy here, here with Angular 2 Material's loading bar or circle -->
          <div class = "parent">
            <div class="spinner">
              <div class="rect1"></div>
              <div class="rect2"></div>
              <div class="rect3"></div>
              <div class="rect4"></div>
              <div class="rect5"></div>
            </div>
          </div>
          <!--<progress-bar [value]="50" [max]="100"></progress-bar> // Simple Progess Bar-->
        </div>
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</div>

AppComponent CSS

html, body{
  height: 100%;
  font-family: Arial, Helvetica, sans-serif
}

a.active {
  background-color: gray;
}

h1 {
  color: #00BCD4;
}


.parent{
  position: fixed;
  left:0;
  right:0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.1);
  display: flex; /* establish flex container */
  flex-direction: column; /* make main-axis vertical */
  justify-content: center; /* align items vertically, in this case */
  align-items: center; /* align items horizontally, in this case */
}

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}



.spinner > div {
  background-color: black;
  height: 100%;
  width: 6px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
       transform: scaleY(1.0);
       -webkit-transform: scaleY(1.0);
     }
}

組件如何在瀏覽器中加載

Answer 1

我不知道你怎么看

<div  [ngStyle]="{'background-image': 'url(' + photo + ')','height':'100%','width':'100%','margin':'0px'}" >

但是這是純CSS的結果：

{
   background-image: url(photo);
   height: 100%;
   width: 100%;
   margin: 0;
}

現在，也許您認為這應該使您的background-image伸展到<div>寬度和高度的100% ，但是……實際上不是。

如果(photo)小於div，則必須設置div的background-size屬性，以使圖像覆蓋所有背景。

您應該將其設置為cover 。

---

提示：每當需要CSS幫助時，如果跳過AngularJS部分，而只是問： 這是我得到的CSS ，為什么我的圖片沒有全尺寸？ 您會大大增加快速獲得正確答案的機會，甚至可能來自不了解AngularJS的人（並且不需要了解它即可為您提供幫助）。

---

如果我的回答不能解決您的問題，則需要創建一個最小，完整且可驗證的示例，以便我們檢查並查看為什么您的background-image不適用。 無論您的應用程序發生什么，它仍然會輸出HTML + CSS + JS 。 這就是您需要幫助的地方。