If you have an image, and you added an overlay of a semi-transparent white, e.g. rgba(255, 255, 255, 0.3) in CSS, you get a slightly lighter version of the image.

My question is, if you add another overlay on top of it (with another element or something) and that element has rgba(0, 0, 0, 0.3), which is semi-transparent black with the same opacity, would the image turn back to normal?

  • wouldn't that just give you an overlay of (rgba(128, 128, 128, 0.3)?
    – Vincent
    Oct 20, 2016 at 11:01

1 Answer 1



Color = alpha*FG + (1-alpha)*BG

what you are proposing is

Color = alpha + (1- alpha)*(0+(1-beta)*original)

so alpha would have to be

(0.3 original)/(-1. + 0.7 original)

if first layer is 0.3. So no not possible unless you only have one color. Even if this wasnt the case you would lose all pure colors by clipping.

  • Thank you! Is there a way to use overlays and get the image's true colors back?
    – FoxInFlame
    Oct 20, 2016 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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