PNG transparent

HTML-CSS
1

Hello, I have this PNG logo in my html code.

<img src="img/skypepng.png" width="100" height="120"/>

But I can see a square grey/white background. It supose to be transparent. I want the logo with my web background color.

I have tried this:

<div class="parent">
    <img src="img/skypepng.png" width="100" height="120"/>
    </div>

.parent {
    background-color: #000000;
    }
    .parent img:hover {
      opacity: .0; /*change this accordingly*/
    background: rgba(255,255,255,0.5);
    /*Last value of rgba is opacity, 0.0 -> 1.0*/
    }
    
    .parent img {
      background: rgba(255,255,255,1);;
    }

But can´t figure it out.

2

Hi!

Clearly I’m not getting what you are saying. But tried the following based on assumption that you are using black as your background color and when we hover mouse on image it should look grey.

<div class="parent">
    <img style="background-color:black;" src="https://material.io/resources/icons/static/ic_icons_192px_light.svg" width="100px" height="120px"/>
    </div>
    <style>
.parent {
    background-color: #000000;
    }
    .parent img:hover {
      opacity: 50%; /*change this accordingly*/
    /*background: rgba(255,255,255,0.5);*/
    /*Last value of rgba is opacity, 0.0 -> 1.0*/
    }
    
    .parent img {
      background: rgba(255,255,255,1);
    }
    
    </style>

In the above code, I just set background color of an image to black and comment out /*background: rgba(255,255,255,0.5);*/

Finally, Set Opacity to 50%.

Is this what you are trying to do?

1 Like
3

Hi Madan, thanks for the advice, you were right, I didn´t explain myself in a proper way. In fact, my problem was the checkered background behind the image. And that was because the png wasn´t a png but a jpg. I fell like a dumb ha ha. Thanks anyway

1 Like