Transparent PNG not coming as transparent inside <div> tag-CodePudding

Here's an example I am trying:

<div class=red>

<img src="https://i.imgur.com/huxFtq5.png" width=50%>

</div>

<style>

.red
{
    border: 1px #BC8000 solid;
    background: #FDF5E5;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 5px;
}

</style>

The output is:

My question is how to make image transparent? The div background should stay 'yellow'.

Update: I am using a markdown software where I embed the HTML along with CSS. Could it be the software itself or, is there a way to tweak HTML?

CodePudding user response：

Apply a class to your image or style it directly as inline css with a transparent background color. Some browsers may accidentally put a white or black BG Color on img.

<html>
<head>
    <style>
        .red {
            border: 1px #BC8000 solid;
            background: yellow;
            padding-top: 10px;
            padding-left: 10px;
            padding-right: 5px;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class=red>
        <img style="background-color: transparent;" src="https://i.imgur.com/huxFtq5.png" width=50%>
    </div>
</body>
</html>

CodePudding user response：

.red{
  border: 1px #BC8000 solid;
  background: yellow;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 5px;
  padding-bottom: 5px;
}

<div class=red>
    <img src="https://i.imgur.com/huxFtq5.png" width=50%>
</div>

CodePudding user response：

Most likely, it is because of the markdown software you mentioned. When you inspect the page, does the img tag (src) have any additional queries? Something like: src="https://i.imgur.com/huxFtq5.png=jpg", look at the and of the url, if it has it's configuration, you need to allow png format.