5

我试图制作检查元素的背景并将其背景更改为具有 alpha 通道的功能。函数有这种形式：

$.fn.bgalpha = function(alpha) {
    var bg = $(this).css('background-color');
    //...
}

但是：当设置正常颜色时，chrome将bg返回为rgb，当没有bg时返回为零的rgba，即8总是返回十六进制，ie9在没有bg时返回“透明”，当有bg时返回rgb等等。这么多不同案例。

我想要做的是 > 从对象的 bg 颜色中获取 r,g,b，将其添加到“a”通道并将元素 bg 设置为具有所有值的 rgba。但是当我们谈论交叉浏览时，从简单的事情开始变得棘手和复杂。

您知道如何以“通用”方式使用这些颜色吗？在不同的情况下，我将值“无”、“透明”、“rgba”、“rgb”或“hex”作为 bg 的初始值

4

2 回答 2

2

包括jQuery Color 插件（它是官方认可的）并使用它的.alpha()方法。

以下代码片段将更改背景颜色，this使其 50% 透明：

var clr2 = $.Color(this,'background-color').alpha(0.5);
$(this).css('background-color', clr2.toRgbaString());

或一行：

$(this).css('background-color', $.Color(this,'background-color').alpha(0.5).toRgbaString());

http://jsfiddle.net/mblase75/aea3h/

于 2013-02-22T20:53:23.077 回答
0 
$.fn.bgalpha = function(alpha)
{
    return $(this).each(function(){
        $(this).css('background-color', $.Color(this,'background-color').alpha(alpha).toRgbaString());          
    });
}

使用Blazemonger 的解决方案 - 这是最终代码。

使用：

$('.something').bgalpha(0.8);

它需要jquery.color.js（缩小后7kb）

于 2013-02-22T21:24:46.040 回答