为什么jQuery .css（'background-color'）为'transparent'返回rgba（0,0,0,0）？

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.

Answer 2

It's not jQuery. jQuery returns what the browser gives it for the computed value (eg, from getComputedStyle or currentStyle ). What the browser gives it may be in any notation form the browser wants to use. In this case, the browser on which you're testing uses rgba (red, green, blue, "alpha" — eg, opacity, 0 = transparent), which is a pretty good notation. Other browsers may just use rgb or even hex color strings, which would be unfortunate as neither of those can represent transparent correctly.

Answer 3

You will not be able to get the color as a name directly from jQuery.

You can instead use the plugin jQuery Color ( https://github.com/jquery/jquery-color ) to convert the value to its name, or manually do something similar.

An example using your jsFiddle

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

( http://jsfiddle.net/Ap6qD/1/ )