I want to do a transparent background

Ionic Framework ionic-v3
1

I want to create a transparent background how can i do that.
.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

Now i want to remove the white box and transparent with my background how can i do that please help me anyone.

2 Likes
2

right click on it -> inspect element -> a thing opens where you can play with your css classes.

3

Use CSS proporties

background-color: transparent;
or
background-color: rgba(0, 0, 255, 0.5);
4

In CSS, there is no property such as transparancy. But, you can achieve transparancy by inserting a pseudo element with regular opacity the exact size of the element behind it. The CSS3 property for transparent is opacity and it is a part of the W3C CSS3 recommendation.

div
{
  opacity: 0.6;
}

The opacity-level describes the transparency-level, it ranges from 0.0 to 1.0. The level 0.0 is completely transparent, 0.5 is 50% see-through and level 1.0 is not transparent. Opacity has a default initial value of 1 (100% opaque).

5

I agree with @larabrian set the card background as transparent

Or it’s opacity to 0