根據變量製作背景半色

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大部分的時間是一樣的東西 「黑」 或「白「等。所以，我沒有問題設置背景顏色，因爲我可以做一些像background-color: black。正如你在我的代碼中看到的那樣。

有時value.title就像是「黑/粉紅」或「黑/白」。

如何將li項目的背景顏色設置爲50％黑色和50％白色？有沒有簡單的方法將其納入代碼？

Answer 1

顏色JS增加了大量的支持色彩處理 https://github.com/brehaut/color-js 混合兩種顏色應該是這個樣子：

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

如果你不想導入庫，他們基本上只是代表顏色籃板和然後計算每個顏色通道的平均值。

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