Transparent image not being transparent


#1

I’m trying to put an image on my login page to make it look decent. The image is transparent however when I put it in my ionic app it has a background, in this case the background appears grey against the default white app background. Any suggestions on how to make the image appear transparent in ionic?

I just used a simple ion-img tag. any help is appreciated. I attached the image file too.

<ion-img height="150" src="../../assets/picture.png"></ion-img>



#2

Use Chrome DevTools to inspect the style cascade. I would suspect you have a style that is being applied without you realizing it.

Note: ion-img is only meant to be used inside of virtual-scroll, so I would change the tag to the standard tag.


#3

ahh yes I just needed to use the tag. Shame on me for not trying that before posting this.

thanks!


#4

Hi, I am using ionic 4.I want to make my ion item transparent, Whatever I do. That doesnt work. Here are my snippets. 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);
}