過渡顏色與背景顏色

Question

我有一個網站有藍色背景，從上到下。現在我想通過css讓藍色從頂部最淺的藍色變成最底下的藍色。所以基本上，當您向下滾動時，頁面會轉變爲較暗。這可能與CSS或甚至jQuery？我無法在任何地方找到解決方案，我發現的所有示例都是當您將鼠標懸停在上面並且作爲效果轉換時，但我試圖實現的是在頁面加載時發生的背景。這可能與CSS或jQuery？

Answer 1

爲此，您可以使用CSS漸變

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 */ } 

Answer 2

雖然不支持它通過每個瀏覽器，我喜歡使用下面的漸變方法，所以你只需要在一個地方編輯它;背景顏色

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