0

See Image for the problem mentioned

Q: Why do the colors have different shade/opacity, and how do i solve it?

<!DOCTYPE.html>

<head>
  <meta charset="utf-8">
  <style type="text/css">
    .maroon {
      background-color: #4f8a2ad4;
    }
  </style>
</head>

<body>
  <div class="maroon">
    <img class="maroon" height="200" src="http://www.pngmart.com/files/7/CDN-PNG-Transparent-Image.png" alt="Any image with transparent 
      background">
  </div>
</body>
Pranav Raykar
  • 29
  • 7
  • 3
    You're setting the background of the image to be transparent and a specific colour. You're also setting these same values to the element underneath it. As a result, when the div's background is viewed through the tinted and partially transparent image's background, it appears darker. Just like looking at things through sunglasses. If you didn't colour the image background, things would look different! – enhzflep Sep 06 '20 at 16:29
  • @enhzflep omg, i just discovered a cool trick with a mistake xD, does anyone use this type of code for styling? or is it a bad behaviour? okay so, its like putting a transcluscent img element over the div element. So that means the transparency of the img element by default is'nt 100%? Is it available as a CSS property? – Pranav Raykar Sep 06 '20 at 18:16
  • :D I don't know how others use it, but I imagine some would make use of the effect. I've never seen images without transparent areas behaving in this way. I suspect it only happens to areas of 100% transparency in the image. When you do have 100% transparency though, CSS can make things more pleasing. – enhzflep Sep 06 '20 at 19:40

0 Answers0