Search code examples
csspng

Transparent png image is not fully transparent in browser

I am using Chrome browser. I have a fully transparent .png image for logo, but there seems to be a problem:

enter image description here

You need to look quite a second time but as you can see the image has a lighter tint than the background. I create the background with CSS:

background: #e1e2e4;
background: -webkit-gradient(linear, left top,
            left bottom, from(#e1e2e4), to(#8f9094));

background: -moz-linear-gradient(top,  #e1e2e4,  #8f9094);
filter: progid:DXImageTransform.Microsoft.gradient
        (startColorstr='#e1e2e4', endColorstr='#8f9094'); 

background-repeat: no-repeat;
background-attachment: fixed;

Any ideas why this happens? How can I solve this?

Solution

  • It has to do with color profiles and color correction. See this article for more detail.