Question

我想知道是否可以制作50％的一种颜色和50％的另一种颜色。颜色来自我从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大部分时间都是＆＃34; Black＆＃34;或＆＃34;白色＆＃34;那么我设置背景颜色没有问题，因为我可以做background-color: black之类的事情。正如您在我的代码中看到的那样。

有时value.title类似于＆＃34;黑色/粉红色＆＃34;或＆＃34;黑/白＆＃34;。

如何将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，然后计算每个颜色通道的平均值。

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

根据变量

1 个答案: