Question

我正在使用Ionic 4，但在向页面的特定部分显示背景图像时遇到问题。

以下是HTML代码：

<ion-content>
  <ion-grid>
    <div id="match_details">
       <ion-row class="match_time">
         <ion-col text-center>
           {{ match.datetime | date: 'dd/MM/yyyy' }}
         </ion-col>
       </ion-row>
      <ion-row class="match_time">
        <ion-col text-center *ngIf="match.status; else notStarted">
          {{ match.status }}
        </ion-col>
        <ng-template #notStarted>
          <ion-col text-center>
            {{ match.time }}
          </ion-col>
        </ng-template>
      </ion-row>
      <ion-row>
        <ion-col id="championship" text-center>
          {{ match.championship }}
        </ion-col>
      </ion-row>
      <ion-row *ngIf="match.result != null">
          <ion-col col-5 text-center class="match">
          {{ match.home_team }}
            <div *ngFor="let goal of match.home_team_goals" class="striker">
            <ion-icon name="football"></ion-icon><i> {{ goal }}</i>
          </div>
        </ion-col>
        <ion-col col-2 text-center class="result">
          {{ match.result }}
        </ion-col>
        <ion-col col-5 text-center class="match">
          {{ match.away_team }}
          <div *ngFor="let goal of match.away_team_goals" class="striker">
            <ion-icon name="football"></ion-icon><i> {{ goal }}</i>
          </div>
        </ion-col>
      </ion-row>
      <ion-row *ngIf="match.result == null" align-items-center>
        <ion-col col-5 text-center class="match">
          {{ match.home_team }}
        </ion-col>
        <ion-col col-2 text-center>
          -
        </ion-col>
        <ion-col col-5 text-center class="match">
          {{ match.away_team }}
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col text-center *ngIf="match.stadium" class="stadium">
          {{ match.stadium }}
        </ion-col>
        <ion-col text-center *ngIf="match.broadcast_type == 'Rediffusion'" class="stadium">
          Rediffusion
        </ion-col>
      </ion-row>
    </div>
    <h3 *ngIf="match.channels_all != null" class="all_channels" text-center>Tous les diffuseurs</h3>
    <ion-row>
      <ion-col text-center *ngIf="(match.channels_all | json) != '{}'; else noChannel">

        <ion-grid>
          <ion-row *ngFor="let country of match.channels_all | mapToIterable" align-items-center class="row_channel">
            <ion-col col-6>
              {{ country.name }}
            </ion-col>
            <ion-col col-6>
              <div *ngFor="let channel of country.channels">
                {{channel}}
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
      <ng-template #noChannel>
        <ion-col text-center *ngIf="match.channels_all != null" >
          <ion-col col-6>
            France
          </ion-col>
          <ion-col col-6>
            {{ match.channels }}
          </ion-col>
        </ion-col>
        <ion-col text-center *ngIf="match.channels_all == null" >

        </ion-col>
      </ng-template>
    </ion-row>
  </ion-grid>
</ion-content>

我想为我的match_details id的css代码添加背景图片（不起作用）：

  #match_details {
    --background: url("../../../assets/imgs/stade5.png") no-repeat center/cover fixed;
  }

这是我图片的相对路径：

src/assets/imgs/stade5.png

注意：当我在css中使用ion-content标签时，我成功显示了图像（但我不希望整个背景都带有图像）：

 ion-content {
    --background: url("../../../assets/imgs/stade5.png") no-repeat center/cover fixed;
  }

有人知道怎么做吗？

谢谢。

Answer 1

您只需要为背景图像编写正确的CSS属性名称即可。

#match_details{
  background-image:url("../../../assets/imgs/stade5.png");
}

如何为页面的特定部分添加背景图片？

1 个答案: