If I have a transparent image, it will take the color of its background. Sometimes, however, the foreground of my image is the same color of the background. And sometimes I think it would look cool to be the opposite (complementary) color of its background. For example, black to white, red to green, blue to orange, etc. Is this possible and how would I do it?

  • 1
    Transparent images don't have a background so what you are wanting to do is not possible. – DavidPostill Apr 2 '17 at 19:39
  • The general concept of having a background and an image is layering and while it is true that transparency itself won't do any tricks, professional drawing software (including The GIMP) supports layers which perform operations other than plain transparency, such as adding brightness, changing colours, etc. These can also be combined with various degrees of transparency. Since you chose the tag image-processing I believe this is the information you're looking for. – Run CMD Apr 2 '17 at 20:00

I'm going to guess this is about website design in particular.

While impossible with an image alone (which only have an alpha channel, nothing more), modern browsers have CSS features such as background-blend-mode and mix-blend-mode. I think setting mix-blend-mode to exclusion would give you the desired result...

(Of course, this is browser-specific, although widely supported nowadays. For IE you might find something similar in filters...)

| improve this answer | |
  • Is it possible to just use the image, so that a profile picture on Gmail or some similar site will work like this? – anonymous Apr 3 '17 at 22:12

A transparent image – by definition – does not have a background color. In fact, a normal image file does not even have a concept of "foreground" or "background". Typically, images consist of only one layer of pixels, and the color of those pixels is defined by their amount of red, green and blue. In transparent images, those pixels additionally specify an alpha-value that determines their opacity.

What I think you want is a standalone image that could somehow figure out what background it was shown on. This is technically impossible. For example, a browser will just render your transparent PNG file wherever the website specifies its location, whatever background color (or image) there happens to be. You have to generate different colors in the image for different backgrounds.

(Of course, there are more complex image formats such as a multi-layer TIFF or even a Photoshop file, in which there can be multiple layers with different overlay effects, but I understand that this is not the context of this question.)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.