Question

如何使用color-code从linear gradient值获取jQuery。假设我的值为linear gradient

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

我怎么能从中提取颜色代码。在这种情况下我应该得到#fff的最终输出。我尝试使用

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

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

Answer 1

一种可能的解决方案是使用'selector'类| id创建一个canvas元素来设置它的样式。

然后你可以在画布上建立一个像素的RGBA ..非常'hacky'但它是我的小脑子唯一能想到的东西！

像这样（未经测试！）：

让我们说你的HTML看起来像这样：

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

然后你要检查背景颜色..所以我们创建一个canvas对象来克隆那个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(',') +")");
      }

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

Answer 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/

Answer 3

高效方法：

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

＆在您的jquery中：

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

它将为您带来价值

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

3 个答案:

替代地