jQuery函数添加alpha到元素bg

我试图做一些函数来检查元素的bg并且改变它的bg来赋予alpha通道。函数有以下形式：jQuery函数添加alpha到元素bg

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

但是：镶边时，正常的颜色设置返回BG为RGB和与RGBA零的时候没有BG，即8总是返回十六进制，IE9回报“透明”时，有没有bg和rgb，当有bg时等。非常不同的情况。

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

你有什么想法如何操作这些颜色一些'uniwersal'的方式？在不同的情况下，我得到的值“无”，“透明”，“RGBA”，“RGB”或“十六进制”为BG

来源

2013-02-22 OPOPO

这可能是更简单了很多比它的声音。如果浏览器返回十六进制颜色，它可能不支持rgb，并不是所有浏览器都支持。并非所有浏览器都支持rgba，如果浏览器不支持rgba，则无法设置Alpha通道，因此您需要先测试浏览器是否支持rgba，如果是，请使用rgba设置颜色！ – adeneo 2013-02-22 20:41:18

解决方法如何：使用两个元素，层叠在一起，一个具有背景，另一个具有内容。然后改变背景的不透明度。 – Blazemonger 2013-02-22 20:41:24

的初始值包含了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/

来源

2013-02-22 20:53:23 Blazemonger

这相当多的代码... – OPOPO 2013-02-22 20:58:55

不是真的。取决于你想达到的目标。我已经减少了。 – Blazemonger 2013-02-22 21:00:18

got-red-bg #lol div，make $（'＃lol'）。bgalpha（0.5）;并拥有50％的透明度，就是这样。 – OPOPO 2013-02-22 21:01:54

$.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（minifing后7KB）

来源

2013-02-22 21:24:46 OPOPO

jQuery函数添加alpha到元素bg

回答

相关问题