CSS div具有不同的背景颜色，没有彩虹效果

Question

我想创建一个像这样的css栏：

我知道的第一种方法是使用带有onw颜色的数字div。

第二种方法是使用一个带有`

的div

background: -webkit-linear-gradient (left, red, orange, yellow, green, blue, indigo); 

这种方式可以达到我想要的效果，但颜色会像彩虹一样逐渐消失，这就是我不想要的效果。

有没有什么方法可以实现一个不同颜色的css div，比如显示的那个但没有彩虹效果？

欢呼声。

编辑：非常感谢每一个人，感谢您的时间和帮助。

Answer 1

请参阅下面的CSS跨浏览器代码：

.bar {
  height: 10px;
  width: 350px;
  background: -webkit-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  background: red; /* For browsers that do not support gradients */
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  /* For Fx 3.6 to 15 */
  background: -moz-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  /* Standard syntax */
  background: linear-gradient(to right, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%); 
}

<div class="bar"></div>

Answer 2

如果指定颜色位置，则可以使用渐变来实现此效果：

$(".viewed[style*='backlground:#F9F0D5']").removeClass()

您可以使用CSS gradient editor确保使用正确的参数。

Answer 3

使用此：

background: -webkit-linear-gradient(left, red, red 20%, orange 20%, orange 40%, yellow 40%, yellow 60%, indigo 60%, indigo 80%, blue 80%, blue 100%); 

没有必要使用几个div。

这个想法是你指定例如通过指定颜色两次，从橙色20％到相同颜色40％的渐变。

小提琴：https://jsfiddle.net/4hrc7ydx/