イオン：背景画像が正しく

Question

私はイオングリッドにおけるイオンリストと、多くのイオンスクロール付き（ロング）のページを持って適用しません。特にこのページに背景画像を適用しようとしています。これは、（より少ないHTMLで）別のページに完全に取り組んでいます

sample.html：

<ion-content no-padding overflow-scroll="true" class="test"> 
<ion-refresher (ionRefresh)="refreshHome($event)"> 
    <ion-refresher-content></ion-refresher-content> 
</ion-refresher> 
<img [src]="banner.png"/> 
<ion-list class="category_list" *ngIf="tags_home && tags_home[0]"> 
    <div *ngFor='let tag_selected of tags_home' class="category"> 
    <ion-grid no-padding align-items: center> 
     <ion-row> 
     <ion-col>title 
     </ion-col> 
     <ion-col col-auto> 
      <button>button</button> 
     </ion-col> 
     </ion-row> 
    </ion-grid> 
    <ion-scroll scrollX="true" direction="x"> 
     <img *ngFor="let item of tag_selected.slide" [src]="item.img"/> 
    </ion-scroll> 

  sample.css：

ion-content { 
    .category_list { 
    bottom: 0; 
    height: 62vh; 
    .category { ... } 
    } 
    } 

私はion-content下background-image（及びイオンリストを追加してみました）何も表示されていません（問題なく他のページで作業しています）。 .category_listの下に背景を追加するだけで（それもスクロールする前に停止）ページの約30％のためにそれを示しています。

Chromeのインスペクタでcssを調べて、クラスをbackground-imageと追加しました。ページ全体は、バックグラウンドを示したが、すべてのイオンスクロールは（どちらかの背景なしですべて、何の結果その自身背景だけでなく...

私は:not()を使用してみましたがありませんでしたが、失敗したかの背景サイズを失いました'本当の'背景）

イオンスクロールは、他のページには存在しないため、私のバックグラウンドが乱れているのは確かです。

編集：それは混乱を避けるために、私のサンプルではありませんでしたが、私は私のバナー前ion-refreshを持っている...このイオンリフレッシュは、それがion-content下に置かれたときがバックグラウンドを持っています。正しく削除すると、ページ全体の背景が表示されます。しかし、私はこのような<ion-content>のためにあなたの背景を設定してみてください。このion-refresh ...

Answer 1

が最後に

ion-content { 
    .scroll-content { 
    background-image: url('../assets/imgs/sample.png'); 
    background-repeat: repeat !important; 
    background-size: 120% !important; 
    } 

...この方法でそれを解決し、ion-refreshがではありません私の背景を隠してを食べています。しかし、すべてion-scrollにも背景がありました。だから私は.categoryクラスの下にすべてのscroll-contentを選択しました。

ion-content { 
    .scroll-content { 
    background-image: url('../assets/imgs/sample.png'); 
    background-repeat: repeat !important; 
    background-size: 120% !important; 
    } 
    .category_list { 
    //... 
    .category { 
     .scroll-content { 
     background-image: none !important; 
     } 
     //... 
    } 

そして、そのコンビネーションですべてうまくいっています。

Answer 2

が必要

<ion-content padding style="background-image:url('your-img-path/url');background-position: center;background-repeat: no-repeat; background-size: cover;">