CODEWITHSUNDEEP
javascriptjquerycsshtml
b2550
b2550

Reputation: 490

Invert an image based on color under it

I have a mask (PNG) that I want to invert the color that is under it. It is for a floating menu. I don't want the it to invert all at once, just when it to invert parts based on which parts are under it. Is it possible or do I need to do something else?

Example: Half the page is black and half is white. The image is over these two halfs. I want the image to invert what is under it so you can see the image

Example:

enter image description here

I searched around on Google and found nothing.

Upvotes: 3

Views: 232

Answers (2)

Eric
Eric

Reputation: 97601

What you're describing is a XNOR operation:

Example 1:

Black: #000000
Black: #000000

Result == Black `xnor` Black
       == Black ^ ~Black
       == #000000 ^ #ffffff
       == #ffffff
       == White

Example 2:

Red:   #ff0000
Black: #000000

Result == Red `xnor` Black
       == Red ^ ~Black
       == #ff0000 ^ #ffffff
       == #00ffff
       == Cyan

Upvotes: 1

imbask
imbask

Reputation: 165

I had something like that to do for a website a couple of months ago and i'm telling you, it's a real pain... if you take a look at http://www.pixastic.com/lib/docs/ you might find something that'll suit you, but it takes a lot of tweeking to make it work properly

this .js will transform your png to a canvas image and you might be able to modify the colors dynamically with it

Upvotes: 0

Related Questions