ionic 2應用程序中的離子列表視圖未附帶背景圖像

Question

我試圖在ionic 2應用程序中設置背景圖像，但背景圖像未設置在列表后面。 是否有任何方法可以使圖像以列表視圖覆蓋全屏？

截圖：

我的代碼：

 .backgound-image { background-image: url('../img/Grammar.jpg'); width: 100%; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; 

 <ion-content class="backgound-image"> <ion-title></ion-title> <ion-list> <ion-item> <ion-label floating>Username</ion-label> <ion-input type="text"></ion-input> </ion-item> <ion-item> <ion-label floating>Password</ion-label> <ion-input type="password"></ion-input> </ion-item> <br> <ion-item style="text-align:center;"> <button style="border-radius: 0px!Important; width: 70%!Important;" ion-button color="primary" (click)="dashboardPage()">Login</button><br><br> <p style="text-align: center;color: blue;">Forgot password?</p><hr> <p style="text-align: center; display: inline ">not a member? </p><p style="text-align: center;color: blue; display: inline"> Sign up here</p> </ion-item> </ion-list> <div class="hr-sect">Or Login with</div> <ion-grid> <ion-row> <button style="border-radius: 0px!Important; width: 70%!Important; margin-left: 15%;" ion-button block color="danger">Google+</button> </ion-row> <ion-row> <button style="border-radius: 0px!Important; width: 70%!Important; margin-left: 15%;" ion-button block color="button">facebook</button> </ion-row> </ion-grid> <ion-footer style="margin:0rem 0rem!Important;"> <button ion-button block color="Dark" (click)="pushPage()">Explore</button> </ion-footer> </ion-content> 

Answer 1

謝謝得到答案。

 ion-item{ background: transparent !important; } 

Answer 2

設置背景尺寸屬性的封面，如下所示：

  .backgound-image { background-image: url('../img/Grammar.jpg'); width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; }