배경이 다른 그라데이션

Question

내 웹 사이트 배경이 상위 55 %를 하나의 색으로하고 아래 45 %를 다른 색으로 지정하고 싶습니다. 튜토리얼 here (나는 자리에 크기 차이를 쉽게하기 위해 녹색, 80 % 및 20 %를 사용하고 있습니다)

background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%); 
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%); 
background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%,  rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%); 
background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%,  rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%); 

background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%,  rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%); 
background-color: green; 

을 기반으로하지만 따라하기 어려운 비트이고 내가 원하는 기능을 얻을 수 없습니다입니다. 지금은 화면 아래로 그라디언트를 반복하지만 그 이유는 모르겠습니다. 두 번째 rgba() 항목을 제거하면이 항목이 완전히 중단되고 그 내용이 내가 따라야 할 유일한 길입니다. 당신이 body이 배경을 적용하면

Answer 1

이 CSS를 추가해야합니다 :

html {height: 100%;} 

그렇지 않으면, 몸 전체 페이지 높이를하지 않습니다.

이 Fiddle