CSS div mit verschiedenen Hintergrundfarben ohne Regenbogeneffekt

Question

Ich mag würde eine CSS-Bar wie diese erstellen:

Der erste Weg, ich weiß, ist die Nummer zu verwenden, jede mit ihrer onw Farbe divs.

Der zweite Weg ist ein div mit `

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

auf diese Weise erreicht zu verwenden, was ich will, aber die Farben ineinander verblassen wie ein Regenbogen, und dies ist der Effekt, den ich will nicht .

also gibt es eine möglichkeit, eine css div mit verschiedenen farben wie die gezeigte zu erreichen, aber ohne regenbogeneffekt?

Prost.

EDIT: Vielen Dank, für Ihre Zeit und Hilfe.

Answer 1

Siehe CSS Cross-Browser-Code unten:

.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

Sie können diesen Effekt mit Farbverlauf erzielen, wenn Sie Farbpositionen angeben:

background: -moz-linear-gradient(top, #ff3232 0%, #ff2828 35%, #48ff30 35%, #48ff30 35%, #48ff30 68%, #7db9e8 68%); 

Sie CSS gradient editor sicher zu sein, verwenden Sie richtigen Parameter verwenden.

Answer 3

verwenden:

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

Es gibt keine Notwendigkeit, mehrere divs zu verwenden.

Die Idee ist, dass Sie z. Gradient von Orange bei 20% bis zur gleichen Farbe 40% durch zweimaliges Spezifizieren der Farbe.

Fiddle: https://jsfiddle.net/4hrc7ydx/