Follow

Huh. I have a 1px transparent PNG that I use as background for some HTML elements. This being 2019 and browsers supporting RGBA colors in CSS nowadays, I figured I'd get rid of that image and just use CSS.

...but for some reason it blends to a different color, and I can't figure out why.

I think I kinda sorta partially figured it out. There's definitely something weird going on with my original PNG, as different browsers render the color slightly differently. For the curious, here's a test page with 4 divs, each using a different approach to blend with #000: s.blicky.net/19/colortest.html - the source code has more details.

@ayo hmm, what happens if you use `image-rendering: crisp-edges;` (or maybe `pixelated`)? i wonder what the spec says about how data can be packed together that might make an image nefariously sample from its surroundings

@ayo oh i'm a moron, i got thrown by the word 'image' which is literally the opposite direction to what you're doing >.<

@kaori Heh, yup.

But I did make some progress: It appears that the color difference is a property of the PNG image. If I create an image with the same RGBA values using Gimp or png-pixel.com/, it blends to the same color as the CSS property.

The original PNG was created using `convert 'xc:' boxbg.png`. ImageMagick is living up to its name, but now I need to figure out what makes that PNG so magical.

Sign in to participate in the conversation
niu.moe

Welcome to your niu world ! We are a cute and loving international community O(≧▽≦)O !