jQuery的获得背景渐变色

我想获得背景色，并把它在body，例如我的背景是在FirstColor类：jQuery的获得背景渐变色

.FirstColor{ 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ECAA63), to(#E36D0A)); 
}

现在我想获得的颜色#ECAA63和.FirstColor阶级背景的#E36D0A和取代他们而不是body

body颜色是：

body{ 
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#CEEEEE), to(#98BFF1)); 
}

更换他们.FirstColor类来body为：

＃ECAA63 - 而不是 - > #CEEEEE
＃E36D0A - 而不是 - >＃98BFF1

我试图让背景颜色AC：http://jsfiddle.net/rKQwu/但无法完成。

来源

2012-12-20 Taylor Gomez

在你的jsfiddle中，问题的一部分是你将MooTools设置为你的库，但你试图使用jQuery选择。切换库使它工作，然后你解决背景字符串的问题。 – acjay

首先，为什么不直接切换div的类而不是直接修改样式？

但是，如果您有需要这样做的原因，那么您需要从样式值中解析from和to值。正如我在我的评论中所说的，你的代码在你的jsfiddle中似乎很好;问题似乎是你选择了MooTools而不是你的库的jQuery，并且在我切换之后，它按预期工作。我不知道很多有关Webkit的标准，但在Chrome 23，十六进制值转换为rgb(r, g, b)风格三胞胎，所以我写了一些代码来解析这些出：

var bgGrad = $('.FirstColor').css("background"); 
var parseRgb = (function (rgbStr) { return rgbStr.match(/rgb\(([0-9]+), ([0-9]+), ([0-9]+)\)/); }); 
var fromStr = bgGrad.match(/from\((.*)\),/)[1]; 
var fromRgb = parseRgb(fromStr); 

var toStr = bgGrad.match(/to\((.*)\)\)/)[1]; 
var toRgb = parseRgb(toStr); 

alert('From rgb: ' + fromRgb.slice(1,4) + '\nTo rgb: ' + toRgb.slice(1, 4));

此代码后（在jsfiddle here），fromRgb和toRgb是3个rgb值的数组。一旦提取并修改了值，如果您认为合适，重建新的背景渐变字符串应该是微不足道的。我不知道这个代码对于不同的情况有多强大，但在上面的Chrome版本中，对于我给出的示例，它似乎很适合我。

来源

2012-12-20 09:26:31 acjay

我也尝试过使用它，而不是它们，但不工作。请参阅：http://jsfiddle.net/rKQwu/ –

在Chrome 23上看起来很好，但就像我所说的，我不是什么Webkit标准的专家。这不是你所看到的吗？ http://twitpic.com/bo0g5r – acjay

CSS background风格是几个更具体的background-XXX属性的组合。

-webkit-gradient实际上存储在background-image属性中，而不是像原始代码中那样存储在background-color中。当然，它也可用于化合物background的值。

您将需要解析该字符串，如@acjohnson55的答案中所示。

请注意，至少在Chrome中，返回的字符串输出rgb(r, g, b)语法的颜色，而不是十六进制字符串。您需要确保您写回的颜色也包含在rgb(...)中。

请参阅http://jsfiddle.net/alnitak/xG4SW/，根据您最新的小提琴。

来源

2012-12-20 08:51:07 Alnitak

在他的小提琴中，他似乎已经在使用'.css（“background-image”）'，而不是'background-color'。 –

查看我的更新，''FirstColor：-webkit-gradient：linear'与'body：-webkit-gradient：radial'之间存在差异。演示：http://jsfiddle.net/rKQwu/ –

@Asad他更新了他的小提琴 - 它以前没有。 – Alnitak

jQuery的获得背景渐变色

回答

相关问题