Çoklu dikey arka plan renkleri

Question

Sorun:

beni genişliği ne olursa olsun bir web sayfasını doldurun beş çoklu arka plan renkleri için izin verecek bir çözüm oluşturmak için çalışıyorum. Bunu 5 div etiketi ile yapmayı başardım ama bunu CSS3 kullanarak tamamen yapmanın mümkün olup olmadığını merak ediyorum?

istediğim sonuçtur:

Ben herhangi bir sonuç alınamadan StackOverflow'daki ve web aradık, yoksa basitçe arama çok kötüyüm.

Answer 1

Bunu başarmak için linear-gradients kullanabilirsiniz.

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%); 
} 

Example Here

Sadece

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%); 
} 

Tarayıcı desteği here bulunabilir ek tarayıcı desteği için satıcı eklerler.

Answer 2

Şuna bak, bunun için bir numara yaptık. http://jsfiddle.net/753gugpt/

Ben linear-gradient CSS3 özelliği bu gibi kullanılabilir:

#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>

Belki bu sizin için çalışacaktır :)