如何创建完整的彩虹背景

Question

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

Answer 1

您可以使用下面的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);
}

Answer 2

你可以做到这一点。

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

<div class="container"></div>

如果对你有帮助请告诉我

如何创建完整的彩虹背景

How to create a full rainbow background

html

css

background

color-picker

background-color