jQuery函数将alpha添加到元素bg

时间:2013-02-22 20:18:58

标签: jquery

我试图制作检查元素的bg的函数并将其bg更改为已经给出了alpha通道。功能具有以下形式:

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

但是:当设置正常颜色时,chrome将bg返回为rgb,当没有bg时,chrome返回为零的rgba,即8总是返回hex,ie9在没有bg时返回'transparent',当有bg时返回rgb等。这么多不同的案例。

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

您是否知道如何以某种'uniwersal'方式使用这些颜色? 在不同的情况下,我得到值'无','透明','rgba','rgb'或'hex'作为bg的初始值

2 个答案:

答案 0 :(得分:2)

包含jQuery Color plugin(已正式批准)并使用其.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/

答案 1 :(得分:0)

$.fn.bgalpha = function(alpha)
{
    return $(this).each(function(){
        $(this).css('background-color', $.Color(this,'background-color').alpha(alpha).toRgbaString());          
    });
}

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

使用:

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

它需要jquery.color.js(小型化后7kb)