여러 세로 배경 색상

Question

문제 :

날에 관계없이 폭의 웹 페이지를 작성 다섯 개 여러 배경 색상을 가지고 할 수있는 솔루션을 만들려고. 5 div 태그를 사용하여이 작업을 처리했지만 CSS3를 사용하여이 작업을 완전히 수행 할 수 있는지 궁금합니다.

싶습니다 결과는 다음과 같습니다

것은 나는 어떤 결과없이 유래와 웹을 검색 한, 또는 단순히 검색에서 아주 나쁜입니다.

Answer 1

이렇게하려면 linear-gradients을 사용할 수 있습니다.

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

그냥

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

브라우저 지원 here을 찾을 수있는 추가 브라우저 지원을 위해 공급 업체 접두사를 추가합니다.

Answer 2

이걸 보니이 트릭을 만들었 어. http://jsfiddle.net/753gugpt/

내가 linear-gradient CSS3 속성과 같이 사용 :

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

어쩌면이 당신을 위해 작동합니다 :)