从线性渐变颜色值获取背景颜色

Posted 2023-02-21

【中文标题】从线性渐变颜色值获取背景颜色

【英文标题】：Get background colour from linear-gradient color value

【发布时间】：2014-08-12 01:14:54

【问题描述】：

我如何使用jQuery从linear gradient 值中获取color-code。假设我有一个linear gradient 值作为

background:linear-gradient(to right, #fff 87%,rgba(238,237,233,0) 100%);

我如何从中提取颜色代码。在这种情况下，我应该得到最终输出为#fff。我尝试使用

$('selector').css('background-color');

这对我获取颜色代码没有帮助。有人可以帮我解决这个问题吗。谢谢.. :)

【问题讨论】：

是this 会帮助你吗？

@chriz tanx.but 那行不通，伙计..

这可能对你有帮助...jsfiddle.net/Tbtrz

见***.com/questions/5623838/rgb-to-hex-and-hex-to-rgb，***.com/questions/5999209/…

@ButaniVijay tanx 回复。但这不是我要求的。

【参考方案1】：

一种可能的解决方案是使用“选择器”类|id 创建一个画布元素来设置它的样式。

然后你可以在画布上建立一个像素的 RGBA.. 非常“hacky”，但这是我的小脑袋唯一能想到的！

类似这样的东西（未测试！）：

假设您的 html 看起来像这样：

<style>
.background_element
background:linear-gradient(to right, #fff 87%,rgba(238,237,233,0) 100%);

</style>

然后你要检查背景颜色..所以我们创建一个画布对象来克隆当时的 div。

var canvas = document.createElement('canvas');
//apply width and heigh 1px
canvas.css('background-color', $('.background_element').style.backgroundColor);

那么我们就不能得到这个画布上一个像素的颜色了..

var pixelData = this.canvas.getContext('2d').getImageData(1, 1, 1, 1).data;
console.log('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]);

这会将 RGBA 记录到控制台.. 也许..

- 注意：我当然不推荐在生产环境中使用这个，只是一个 概念证明！

Inspiration

或者

您可以非常花哨，并使用HTMLelement.prototype.alpha 真正融入 RGBA！ :)

类似：

HTMLElement.prototype.alpha = function(a) 
        current_color = getComputedStyle(this).getPropertyValue("background-color");
        match = /rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+[\.\d+]*)*\)/g.exec(current_color)
        a = a > 1 ? (a / 100) : a;
        console.log("rgba(" + [match[1],match[2],match[3],a].join(',') +")");
      

再次非常混乱，但很有可能这会更精确！

【参考方案2】：

试试

 $(function () 
     (function ($) 
         $.fn.rgb2hex = function (prop) 
             return $.map(
             $(this)
               .css(prop)
               .split(/([rgb|rgba|+[\(]+[\d]+[\,]+[ \d]+[\, \d]+[ \d]+[\)])/)
             , function (value, index) 
                 if (value.indexOf("rgb") != -1) 
                    var _rgba = function () 
                      return $.map(value.replace(/[rgba]|[rgb]|[\(|\)]/g, "")
                             .split(",").map(function (r) 
                             return parseInt(r, 10)
                         ), function (k, v) 
                             var h = k.toString(16);
                             var hex = h.length === 1 ? "0" + h : h;
                             var _hex = [];
                             _hex.push(hex);
                             return _hex;
                         );
                     ;
                     return $.map([$.makeArray([], _rgba())]
                     , function (v, i) 
                         return (v.length === 4 
                                ? "#" + v.slice(0, 3).join("") 
                                : "#" + v.join("")
                                );
                     );
                 ;
             );
         ;
     )(jQuery);

     console.log($("div").css("background")
                 , $("div").rgb2hex("background")
                );

     $("div").html("css background: " 
                  + "<br /><br />" + $("div", this).css("background") 
                  + "<br /><br />" + "rgba to hex: " 
                  + "<br /><br />" + $("div", this).rgb2hex("background")
                  );
 )

jsfiddle http://jsfiddle.net/guest271314/9tgDt/

【参考方案3】：

快速见效方法：

<a class="give-it-class" style="display:none" ><?php echo /* your color here  */;?> </a>

& 在你的 jquery 中：

$('.give-it-class').text();

它会给你价值