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

我尝试在background-image（和离子列表）下添加ion-content但没有显示任何内容（在其他页面上工作没有任何问题）。在.category_list下添加背景仅显示页面的大约30％（在滚动之前停止）。

在Chrome检查器中检查css，我添加了一个scroll-content类background-image。整个页面显示了背景，但每个离子滚动都有自己的背景......

我尝试使用:not()但失败了（根本没有背景，没有结果或者在'真实'背景上丢失了背景尺寸）

~~我很确定离子卷轴会弄乱我的背景，因为它们不在另一页上。~~

编辑：我的样本中没有避免混乱，但我的横幅之前有一个ion-refresh ...这个离子刷新确实具有背景ion-content。正确删除它会在整个页面上显示背景。但我需要这个ion-refresh ...

Answer 1

尝试设置<ion-content>这样的背景，

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

Answer 2

终于解决了......

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

这样，ion-refresh不是吃隐藏我的背景。但每个ion-scroll也都有背景。所以我选择了scroll-content类下的每个.category。

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;
      }
      //...
    }

一切都在与这个组合完美结合。

离子：背景图像无法正确应用

2 个答案: