I'm new in css please help me

I want to create a transparent background how can i do that.
below my al details about my requirement
.html

<ion-content fullscreen class="card-background-page">
 
<ion-card>
    <img src="../assets/imgs/emi-background.jpg"/>
    <div class="card-title">
    <ion-item>
          <ion-label color="primary">Interest Rate</ion-label>
          <ion-input placeholder="Text Input" type="number" [(ngModel)]="homeloaninterest"></ion-input>
          <ion-icon item-right><i class="fa fa-percent" aria-hidden="true"></i></ion-icon>
        </ion-item>
  </div>
    <div class="card-subtitle">41 Listings</div>
  </ion-card>
      <ion-row>
            <ion-col center text-center>
              <button ion-button icon-left clear small (click)="shareItem()">
              <ion-icon name="share"></ion-icon>
              </button>
            </ion-col>
          </ion-row>
</ion-content>

.css

  .card-background-page {

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

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

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

}

Capture111111111111111111111111

How i want to remove the white box and transparent with my back ground how can i do that please help me any one.

Trying giving the bg color as rgba

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

i don’t see any changes

try this

background-color:rgba(255,255,255, 0.5);