Determine visible color of page elements with JQuery and/or Selenium/Webriver

I search a way to determine the real visible color of page elements. If i use JQuery i can do the following:

$('#foo').css('background-color');

But, the background-color of #foo may return "transparent" even if one of its parents declared a colored background. So, how do i get the correct color which is visible to end users (including half-transparency / RGBA)?

Update

I am using the Selenium2 Java API with Firefox 5. Maybe there is a way without JQuery, too. Involving Screenshots maybe?

Update 2

I rephrased and extended the question: Get dominating color of a specific area in an image: Color Query for Web 开发者_开发知识库Page Elements

You would need to traverse up the tree to find the element which has a background-color, one approach I did was like this (where textureEl is the element you want to check):

bgcolor = $(textureEl).css('background-color'); 
if (isTransparent(bgcolor)){
    $(textureEl).parents().each(function(){
        if (!isTransparent($(this).css('background-color'))){
            bgcolor = $(this).css('background-color');
            return false;
        }

    });
}

and

function isTransparent(bgcolor){
    return (bgcolor=="transparent" || bgcolor.substring(0,4) == "rgba");
}

but note that my isTransparent function made any non 100% opacity value marked as transparent, if you don't want that, then redefine what to do with rgba colors.

This of course doesn't take into account background-images either, but as your question didn't mention them, nor my application needed to take them into account, there isn't anything there to check for images.