2017-08-17 14 views
0

イオン2アプリケーションで背景イメージを設定しようとしていますが、背景イメージがリストの後ろに設定されていません。リストビューで全画面をカバーするように画像を取得する方法はありますか?ionic 2アプリケーションでイオンリストビューが表示されない

スクリーンショット:

enter image description here

マイコード:

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

+1

あなたはリストをイオンに透明な背景を設定してみてくださいましたか? –

+0

あなたはそれを回答として追加し、それを受け入れることができます。同様の問題を持つ他の人を助ける –

答えて

0

おかげで答えを得ました。以下のような

ion-item{ 
 
    background: transparent !important; 
 
}

0

設定した背景sizeプロパティカバー:

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

関連する問題