CSS - 如何爲不同高度設置漸變色背景

Question

我想爲網站使用線性漸變背景色。例如，漸變顏色從標題開始並結束到頁腳。現在問題在於，由於不同的頁面具有不同的內容量，所以頁面的高度不同。那麼在那種情況下，我該如何設置顏色的終點？例如，我想從#b68d4c到#f6e7cf的梯度。

Answer 1

使用圖像： 你需要弄清楚的是要覆蓋內容最短高度。然後，在你的圖像編輯器中，創建你的漸變。由於它是線性的，因此您可以創建它爲10px寬×500px高（如果500px爲最短高度），並沿着x軸重複它。一旦你的形象被創建，你會然後寫在你的CSS：

body { 
    background:#f6e7cf url(path/to/gradient.jpg) top left repeat-x; 
} 

注：#f6e7cf應該是漸變的顏色整理。這樣做的結果是，如果頁面高於500像素，它將顯示與漸變底部相同的顏色，給它一種錯覺，認爲它正在繼續。

使用CSS3 瑞安卡薩斯指出，使用Colorzilla Gradient Editor是最簡單的方法，我發現（雖然，因爲你不是手工編碼，你不學爲好，但是這是一個不同的討論）。實質上，您可以將兩種顏色分別設置爲0％和100％，確保垂直方向，然後將代碼複製到body { }選擇器中。

Answer 2

在梯度上使用％。在這裏，你有一臺發電機：http://www.colorzilla.com/gradient-editor/