离子：背景图像未正确应用答案

【问题标题】：Ionic: background-image not applying correctly离子：背景图像未正确应用
【发布时间】：2017-12-05 20:25:55
【问题描述】：

我有一个（长）页面，其中包含 ion-list 和 ion-grid 中的许多 ion-scroll。我正在尝试将背景图像特别应用于此页面。它在另一个页面上完美运行（使用较少的 html）

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

示例.css：

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

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

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

我尝试使用 :not() 但失败了（根本没有背景，没有结果或丢失了“真实”背景上的背景大小）

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

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

【问题讨论】：

标签： html css ionic-framework background

【解决方案1】：

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

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

【讨论】：

它不在我的样本中以避免混乱，但我的横幅前有一个ion-refresh...这个离子刷新确实有背景。删除它，正确显示整个页面的背景。但我需要这个ion-refresh...

【解决方案2】：

终于解决了……

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

使用该组合一切正常。

【讨论】：