Ion items not transparent ionic 4

Ionic Framework ionic-v3
1

Hello I am using Ionic 4 and unable to make ion item transparent. Please help
HTML:

<ion-header>
  <ion-toolbar>
    <ion-title>Card Tab</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding="5px" class="vertical-align-content">


        <ion-item class="item item-trns">
         I am Transparent
        </ion-item>
      
   

</ion-content>

SCSS:
.item.item-trns{
    border-color: rgba(0, 0, 0, 0);
    background-color:rgba(0,0,0,0);
}
2

With Ionic 4, you want to use css variables like

ion-item {
    --background: rgba(0,0,0,0);
    --border-color: rgba(0,0,0,0);
}

Ion-button css properties

3 Likes
3

Here is a solution in Ionic 4:

HTML:

<ion-list class="bg-transparent">
    <ion-item color="none" lines="none">
        Some random text
    </ion-item>
    <ion-item color="none" lines="none">
        Some random text
    </ion-item>
</ion-list>

CSS:

.bg-transparent {
  background: transparent;
}

Important things to note:

  • Set background color of the main list to transparent by applying the class and adding CSS as shown.
  • Add the color="none" attribute to each of the ion-item.
  • lines="none" remove the lines under each of the ion-item

That should do it!

2 Likes
4

@ nagasundarkalyanv

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

Change to

ion-item {
    --background: rgba(0,0,0,0)!important;
    --border-color: rgba(0,0,0,0)!important;
}

Or

ion-item {
    --background: transparent!important;
    --border-color:transparent!important;
}
1 Like
5 
 ion-list {
    --ion-item-background: transparent;
}
1 Like
6

The code whats i shared works perfectly to me, but thanks for you comment.
Greats!