如何创建完整的彩虹背景

【问题标题】：How to create a full rainbow background如何创建完整的彩虹背景
【发布时间】：2021-02-27 18:10:29
【问题描述】：

我正在创建一个自定义颜色选择器，但我不知道如何创建彩虹渐变背景颜色。如果可能的话，我想在没有 javascript 的情况下做背景。有人可以指导我吗？

【问题讨论】：

你是在说一个人选择 X 数量的颜色，然后以这种方式生成线性渐变吗？

标签： html css background background-color color-picker

【解决方案1】：

你可以这样做。

.container{
  background:linear-gradient(90deg, Red, Orange, Yellow, Green, Blue, Indigo,violet);
  width:500px;
  height:500px;
}

&lt;div class="container"&gt;&lt;/div&gt;

如果对你有帮助，请告诉我

【讨论】：

【解决方案2】：

可以使用下面的html代码，

#rainbow{
  height: 300px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, Red , Orange, Yellow, Green, Blue, Indigo, Violet);
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="rainbow"></div>

</body>
</html>

你也可以把它改成从上到下

#rainbow{
  background-image: linear-gradient(red, yellow);
}

【讨论】：