How to get real color value after opacity

Question

I am using jquery and css to fade the background color and opacity of a menu item. However, I want to have the background color be the actual css background color:

For example:

css background color: #eabf60
real color after .70 opacity: #ECCD85

i suppose this also depends largely in part on the background behind the opaque element...

Any ideas?

Answer 1

AFAIK, there is no cross-browser way to get the color of a certain point after rendering.

So the only way left is to simulate this. Get the CSS background color plus the opacity and then walk upwards through your parents until you find another background entry.

The problem: You can't get the RGB values of a color either, only the CSS string. So if the background color is "blue", you loose. But most of the time, you should get a 7-character string which you can convert to a 24bit integer (or 3 integers from 0 to 255). After that, you can simply apply the opacity:

finalRed = parseInt (myRed * opacity + parentRed * ( 1. - opacity ));