Why does jQuery .css('background-color') return rgba(0,0,0,0) for 'transparent'?

Question

I have a box here - http://jsfiddle.net/U68p3/2/ - with a transparent background. When I read the background with jQuery's .css('background-color') it returns

               rgba(0, 0, 0, 0) 

which is not very helpful if my code is looking for a match with 'transparent'.

Why is jQuery doing this and is there a way I can make it return 'transparent'?

Thanks.

$(function() {
    var bkgnd = $('#box').css('background-color');
    console.log('background-color is ' + bkgnd);
});

Answer 1

It is not jquery, the computed value for the color are represented in RGBa (Red, Blue, Green, Alpha - for opacity) and not in as color names (like red, blue, orange, transparent etc) or as hex values. According to the specs transparency is represented as rgb(0, 0, 0).

if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).

So instead of looking for this specific value you can add a specific css rule just to include transparency and add that class to the element and use .hasClass or .is of that class to check if the element is transparent.

It seems like different browsers represent it in different ways, IE, FF gives the value as transparency so it is anyways better not to rely on this value representation for any logic.