离子卡透明背景保持白色

Question

我正在遵循这个tutorial来编写用于图像预览的离子模式。基本上，如果您单击图像，此预览将弹出并显示放大的图像。就是这样的： sample

问题是，无论我如何在底部设置离子卡的背景颜色（带有图像描述），它始终显示为白色。

这是HTML代码：

<ion-content>
  <div class="image-modal transparent">
    <ion-item class="close-fake" no-lines (click)="close()">
      <ion-icon name="close"></ion-icon>
    </ion-item>
    <img [src]="img.url" class="fullscreen-image transparent" (click)="close()">
    <ion-card class="card-nest">
      <ion-card-content class="img-info">
        <div class="desc-text">
          <p>Description: </p>"{{ img.desc }}"
        </div>
        <div class="_id">
          <p>Hash: </p>"{{img._id}}"
        </div>
        <div class="filename">
          <p>Filename: </p>"{{img.filename}}"
        </div>
        <p>
          <ion-icon name="calendar" item-left *ngIf="img.createdAt"></ion-icon>
          {{ img.created | date: 'short' }}
        </p>
      </ion-card-content>
    </ion-card>
    <div style="text-align: center">
      <button ion-button color="default">Close</button>
      <button ion-button color="danger">
        <ion-icon name="heart"></ion-icon>Like
      </button>
    </div>
  </div>
</ion-content>

这是scss文件：

page-preview-modal {
    .img-info {
        padding-left: 20px;
        background-color:transparent;
        
    }
    .desc-text {
         font-weight: 500;
         font-size: larger;
         padding-bottom: 15px;
         color: color($colors, dark);
    }

  .content-ios {
    background: rgba(44, 39, 45, 0.84) !important;
  }

  .content-md {
    background: rgba(44, 39, 45, 0.84) !important;
  }

  .close-fake {
      background: transparent;
      color: color($colors, light);
      font-size: 3rem;
  }

  .card-nest {
    border: none !important;
    
  }
}

如何使卡片背景透明？谢谢！