使用Css、Html和Javascript创建渐变块

Question

我将如何创建一组div，每个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来完成。我编写了一些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)
{
	
  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)
{
	var interpolArray = [];
	for(var i = 0; i < steps; i++)
  {
  	interpolArray.push(linearInterpolateColor(startColor, endColor, i/(steps-1)));
  }
  return interpolArray;
}

/**
 Container should be a jquery object
*/
function generateSteps(startColor, endColor, steps, container)
{
	var interpolArray = getInterpolationArray(startColor, endColor, steps)
	
  interpolArray.forEach(function(color){
  	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>

​