为什么jQuery .css('background-color')为'transparent'返回rgba(0,0,0,0)?

时间:2013-12-13 19:07:27

标签: jquery css

我这里有一个方框 - http://jsfiddle.net/U68p3/2/ - 背景透明。当我用jQuery的.css('background-color')读取背景时,它返回

               rgba(0, 0, 0, 0) 

如果我的代码正在寻找与'transparent'匹配的内容,则不是很有帮助。

为什么jQuery会这样做,有没有办法让它返回'透明'?

感谢。

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

3 个答案:

答案 0 :(得分:9)

它不是jquery,颜色的计算值用RGBa(红色,蓝色,绿色,Alpha - 表示不透明度)表示,而不是作为颜色名称(如红色,蓝色,橙色,透明等)或以十六进制表示值。根据{{​​3}}透明度表示为rgb(0, 0, 0)

  

如果值是半透明的,则计算出的值将是rgba()对应的值。如果不是,它将是rgb()对应的一个。 transparent关键字映射到rgb(0,0,0)。

因此,您可以添加特定的css规则以包含透明度并将该类添加到元素中,并使用该类的.hasClass.is来检查元素,而不是查找此特定值。是透明的。

似乎不同的浏览器以不同的方式表示它,IE,FF将值赋予transparency,因此无论如何最好不依赖于任何逻辑的值表示。

答案 1 :(得分:4)

这不是jQuery。 jQuery返回浏览器为计算值提供的内容(例如,来自getComputedStylecurrentStyle)。浏览器提供的内容可以是浏览器想要使用的任何表示形式。在这种情况下,您正在测试的浏览器使用rgba(红色,绿色,蓝色,“alpha” - 例如,不透明度,0 =透明),这是一个非常好的表示法。其他浏览器可能只使用rgb甚至十六进制颜色字符串,这是不幸的,因为它们都不能正确代表transparent

答案 2 :(得分:2)

您将无法直接从jQuery获取颜色作为名称。

您可以使用插件jQuery Color(https://github.com/jquery/jquery-color)将值转换为其名称,或手动执行类似的操作。

使用jsFiddle

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

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