Mehrere vertikale Hintergrundfarben in CSS3

Question

Problem:

Der Versuch, eine Lösung zu schaffen, die mir fünf mehrere Hintergrundfarben erlauben würde, haben, die eine Webseite unabhängig von Breite ausfüllen. Ich habe es geschafft, dies mit 5 div Tags zu tun, aber ich frage mich, ob es möglich ist, dies komplett mit CSS3 zu tun?

Das Resultat, das ich möchte, ist:

Ich habe gesucht und Stackoverflow im Internet ohne Erfolg, oder ich bin einfach sehr schlecht zu suchen.

Answer 1

Sie könnten linear-gradients verwenden, um dies zu erreichen.

Example Here

html, body { 
    height: 100%; 
} 
body { 
    background-image: linear-gradient(90deg, 
     #F6D6A8 20%, 
     #F5BA55 20%, #F5BA55 40%, 
     #F09741 40%, #F09741 60%, 
     #327AB2 60%, #327AB2 80%, 
     #3A94F6 80%); 
} 

Nur Anbieter Präfixe für zusätzliche Browser-Unterstützung

body { 
    background: -moz-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%); 
    background: -webkit-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%); 
    background: linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%); 
} 

Browser-Unterstützung gefunden werden kann here hinzufügen.

Answer 2

Schau dir das an, ich habe einen Trick dafür gemacht. http://jsfiddle.net/753gugpt/

I verwendet linear-gradient CSS3-Eigenschaft wie folgt aus:

#container { 
 
    width: 100%; 
 
    /*or 900px for example */ 
 
    overflow-x: hidden; 
 
} 
 
#exampleB { 
 
    width: 32700px; 
 
    height: 285px; 
 
    background-color: #a8e9ff; 
 
    filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#a8e9ff, endColorstr=#052afc); 
 
    background-image: -moz-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -webkit-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -o-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -ms-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, #a8e9ff), color-stop(0%, #052afc), color-stop(12%, #485e69), color-stop(1%, #ff8d00)); 
 
}

<div id="container"> 
 
    <div id="exampleB"></div> 
 
</div>

Vielleicht wird dies für Sie arbeiten :)