2013-12-10 3 views
0

파란색 배경의 웹 사이트가 위에서 아래로 나 있습니다. 이제는 CSS를 통해 푸른 색이 가장 밝은 파란색에서 가장 어두운 파란색까지 아래쪽으로 이동하게하고 싶습니다. 기본적으로 페이지가 아래로 스크롤하면 어두워집니다. 이 CSS 또는 심지어 jQuery와 가능한가요? 어디서나 솔루션을 찾을 수 없었습니다. 내가 찾은 모든 예제는 마우스를 올려 놓으면 효과가 나타나지만 실제로는 페이지가로드 될 때 백그라운드에서 발생하는 것입니다. 이게 CSS 나 jQuery에서 가능합니까? 당신이 사용하는 CSS를 할 수배경색이있는 전환 색상

+3

Google CSS 그래디언트. – j08691

답변

2


http://www.colorzilla.com/gradient-editor/

그래, 당신이 아래와 같은 스타일을 원하는에 어느 것이 배경 그라데이션을 적용 그라디언트. 당신이 상당히 지저분 얻을 수있는 모든 브라우저를 지원하는 경우 당신이 그렇게 개인적으로 적은 비용으로 그 일을 추천 할 것입니다 볼 수 있지만,이 지원되지 않지만 아래

body{ background: #162772; /* Old browsers */ 
background: -moz-linear-gradient(left, #162772 0%, #7db9e8 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#162772), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, #162772 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, #162772 0%,#7db9e8 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, #162772 0%,#7db9e8 100%); /* IE10+ */ 
background: linear-gradient(to right, #162772 0%,#7db9e8 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#162772', endColorstr='#7db9e8',GradientType=1); /* IE6-9 */ } 
+4

답변이있는 페이지로 연결하지 마세요. 보완하기 위해 예제를 만들거나 :) 이것을 코멘트로 만드십시오. – DaniP

+0

어떻게 작동합니까? 생성 된 코드는 어디에 넣어야합니까? – Bojan

+0

그래 원래 답변을 수정했습니다. – Adam

0

괜찮을으로

각 브라우저별로 아직 다음과 같은 그래디언트 방법을 사용하고 있으므로 한 곳에서만 편집하면됩니다. 배경색

background-color:blue; 
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); 
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); 
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); 
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); 
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));