List with transparent background on top of image background

Ionic Framework ionic-v3
1

I have cards with background image and I need to display list on top of the image (and maybe some other UI elements later). When list is displayed it appears with white background, like this:

image

Any idea how to make the background of the list transparent?

Here is my html:

 <ion-card *ngFor="let item of items" (click)="onCardClick($event, item)">
     <div *ngIf="displayFlag">
          <img src="{{img}}">
          <div class="card-title">{{name}}</div>
          <div class="card-subtitle">{{description}}</div>
           <ion-list no-lines class="card-background">
                 <ion-item *ngFor="let categorie of Categories" >
                    <div>{{categorie}}</div>
                 </ion-item>
           </ion-list>
       </div>
    </ion-card>

Here is scss:

ion-card {
    position: relative;
    text-align: center;
  }

  .card-title {
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
  }

  .card-subtitle {
    font-size: 1.5em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;
  }

  ion-list.card-background{
      position: absolute;
      left: 40%;
      top: 80%;
  }

}

.item .item-content {
  background-color: transparent !important;
}

Thanks.

1 Like
2

Ok, figured it out. Not sure this is the right way to do it, but at least it worked:

  ion-list.card-background{
      position: absolute;
      left: 40%;
      top: 80%;
      background-color: rgba(0, 0, 0, 0);
  }

  ion-item.item-trns {
    background-color: rgba(0, 0, 0, 0);
    color: white;
   }

And in html:

<ion-item *ngFor="let categorie of categories" class="item-trns">
       <div>{{categorie}}</div>
</ion-item>

It important to define background-color for both list and item backgrounds . Otherwise it doesn’t work.

1 Like