javascript - 根据变量使背景半彩色

Question

我想知道是否可以将一种颜色设为 50%，将另一种颜色设为 50%。颜色来 self 从 json 文件中获取的变量。

所以我有这个:

//HTML

<div class="product 12345"> // 12345 is the id of the product
  <div class="colours"></div>
</div>

//Jquery

$.getJSON(url+'?format=json', function(data){

    $.each(data.product.custom, function(i, custom) {

      var productsHtml = [];
      $.each(custom.values, function(index, value){
        var productHtml = '' +
            '<li class="'+ (value.title).toLowerCase() +'" style="background-color:'+ (value.title).toLowerCase() +'"></li>';
        productsHtml.push(productHtml);
      });
      productsHtml = productsHtml.join('');

      $('.product.'+id+' .colours').html('<ul>'+productsHtml+'</ul>');

    });
  });

value.title 大多数时候是“黑色”或“白色”等。所以我可以毫无问题地设置背景颜色，因为我可以做类似背景的事情-颜色:黑色。正如您在我的代码中看到的那样。

有时 value.title 类似于“黑色/粉红色”或“黑色/白色”。

如何将 li 项的背景颜色设置为 50% 黑色和 50% 白色？？有没有一种简单的方法可以将其合并到代码中？

Answer 1

Color-js 增加了很多对颜色操作的支持 https://github.com/brehaut/color-js 混合两种颜色应该是这个样子:

var color1 = Color('#ff0000');
var color2 = Color('#00ff00');
var blend = colo1.blend(color2, 0.5);

如果您不想导入库，它们基本上只是将颜色表示为 rpg，然后计算每个颜色 channel 的平均值。

https://github.com/brehaut/color-js/blob/master/color.js