jquery获取背景渐变颜色

Posted 2023-02-21

【中文标题】jquery获取背景渐变颜色

【英文标题】：Jquery get background gradient color

【发布时间】：2012-12-07 17:47:32

【问题描述】：

我想获取背景颜色并将其放入body，例如我的背景与FirstColor类中的一样：

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

现在我想在.FirstColor 类中获取背景颜色#ECAA63 和#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/ 但无法完成。

【问题讨论】：

您的 jsfiddle 中的部分问题是您将 MooTools 设置为您的库，但您正在尝试使用 jQuery 选择。切换库使其工作，然后你就会遇到解析背景字符串的问题。

【参考方案1】：

首先，为什么不直接切换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 版本上对我来说似乎工作正常。

【讨论】：

我也试过用它代替他们，但不工作。见：jsfiddle.net/rKQwu

在 Chrome 23 上对我来说看起来不错，但就像我说的，我不是 Webkit 标准方面的专家。这不是你看到的吗？ twitpic.com/bo0g5r

【参考方案2】：

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

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

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

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

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

【讨论】：

在他的小提琴中，他似乎已经在使用.css("background-image")，而不是background-color。

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

@TaylorGomez 您在将颜色写回 CSS 时没有指定 rgb(...) - 请参阅 jsfiddle.net/alnitak/xG4SW