用Css，Html和Javascript创建渐变贴图

Question

我该如何去创建每个都有自己背景颜色的div集合，但颜色必须在两个给定颜色之间的渐变范围内。我知道如何在div上创建常规渐变背景，而这不是我所需要的。我需要这样的东西。

它不一定是CSS和HTML（认为是理想的）。如果我需要使用一些确定的JavaScript。即使我必须使用一些PHP来实现这一点，那对我来说也没问题。

这里是什么，我需要一个视觉演示：https://jsfiddle.net/1q6nrow9/

每个div都应该有它自己独特的颜色。颜色不应该流过每个div的边框。

下面是代码的从小提琴样本：

This: no 
<div class="gradient-wrapper"></div> 

<div class="wrapper liquid"> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
</div> 

This: yes 
<div class="wrapper"> 
<!-- <div class="tile tile-01"></div> --> 
<div class="tile tile-02"></div> 
<!-- <div class="tile tile-03"></div> --> 
<div class="tile tile-04"></div> 
<!-- <div class="tile tile-05"></div> --> 
<div class="tile tile-06"></div> 
<!-- <div class="tile tile-07"></div> --> 
<div class="tile tile-08"></div> 
<!-- <div class="tile tile-09"></div> --> 
<div class="tile tile-10"></div> 
<!-- <div class="tile tile-11"></div> --> 
<div class="tile tile-12"></div> 
<!-- <div class="tile tile-13"></div> --> 
<div class="tile tile-14"></div> 
<!-- <div class="tile tile-15"></div> --> 
<div class="tile tile-16"></div> 
<!-- <div class="tile tile-17"></div> --> 
<div class="tile tile-18"></div> 
</div> 

一些CSS：

body { 
    padding: 50px; 
} 
.gradient-wrapper { 
    width: 459px; 
    height: 50px; 
    border: 1px solid #333; 
    margin-bottom: -52px; 
    background: -moz-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* ff3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,255,0,1)), color-stop(100%, rgba(255,0,0,1))); /* safari4+,chrome */ 
    background: -webkit-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* safari5.1+,chrome10+ */ 
    background: -o-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* opera 11.10+ */ 
    background: -ms-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* ie10+ */ 
    background: linear-gradient(90deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* w3c */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1); /* ie6-9 */ 
} 
.liquid { 
    margin-bottom: 50px; 
} 
.wrapper { 
    width: 459px; 
    height: 50px; 
    border-left: 1px solid #333; 
    border-top: 1px solid #333; 
    border-bottom: 1px solid #333; 

} 
.tile { 
    border-right: 1px solid #333; 
    height: 50px; 
    width: 50px; 
    float: left; 
} 
.tile-01{background: #0DF200;} 
.tile-02{background: #1BE400;} 
.tile-03{background: #29D600;} 
.tile-04{background: #38C700;} 
.tile-05{background: #46B900;} 
.tile-06{background: #54AB00;} 
.tile-07{background: #629D00;} 
.tile-08{background: #708F00;} 
.tile-09{background: #7F8000;} 
.tile-10{background: #8D7200;} 
.tile-11{background: #9B6400;} 
.tile-12{background: #A95600;} 
.tile-13{background: #B74800;} 
.tile-14{background: #C53A00;} 
.tile-15{background: #D42B00;} 
.tile-16{background: #E21D00;} 
.tile-17{background: #F00F00;} 
.tile-18{background: #FE0100;} 

Answer 1

这可以用JavaScript来完成。我已经写了一些使用HSL来创建渐变的JavaScript函数。如果您需要处理其他色彩空间，您可以转换为HSL和从HSL转换，但这应该是一个很好的起点。代码片段格式真的搞砸了。查看更容易小提琴这里解析：https://jsfiddle.net/tu47tjb5/1/

function HSLColor(hue, sat, light) { 
 
    this.hue = hue; 
 
    this.saturation = sat; 
 
    this.lightness = light; 
 
    this.getCSS = function(){ 
 
    return "hsl("+this.hue+","+this.saturation+"%,"+this.lightness+"%)"; 
 
    } 
 
} 
 

 
function linearInterpolateColor(startColor, endColor, percentage) 
 
{ 
 
\t 
 
    var hueDiff = (endColor.hue - startColor.hue) * percentage; 
 
    var satDiff = (endColor.saturation - startColor.saturation) * percentage; 
 
    var lightDiff = (endColor.lightness - startColor.lightness) * percentage; 
 
    return new HSLColor(startColor.hue + hueDiff,startColor.saturation + satDiff, startColor.lightness + lightDiff); 
 
} 
 

 
function getInterpolationArray(startColor, endColor, steps) 
 
{ 
 
\t var interpolArray = []; 
 
\t for(var i = 0; i < steps; i++) 
 
    { 
 
    \t interpolArray.push(linearInterpolateColor(startColor, endColor, i/(steps-1))); 
 
    } 
 
    return interpolArray; 
 
} 
 

 
/** 
 
Container should be a jquery object 
 
*/ 
 
function generateSteps(startColor, endColor, steps, container) 
 
{ 
 
\t var interpolArray = getInterpolationArray(startColor, endColor, steps) 
 
\t 
 
    interpolArray.forEach(function(color){ 
 
    \t var colorBlock = $("<div>").addClass("colorBlock").css('background-color',color.getCSS()); 
 
    container.append(colorBlock); 
 
    }); 
 
    
 
} 
 

 
var start = new HSLColor(0, 100, 50); 
 
var end = new HSLColor(40, 25, 100); 
 
generateSteps(start, end, 10, $("#container"));

.colorBlock { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
</div>