柔性div的背景漸變填充，無論是使用CSS或圖像？

Question

我正在使用固定高度的圖像來填充使用類似以下顏色的漸變顏色的div： background：transparent url（green_bg.gif）repeat-x scroll 0 0;

但它只填充高度等於圖像高度。根據其中的文本數量，使用圖像或使用css，填充高度變化的div背景的最佳方法是什麼？

Answer 1

我覺得你要找的是一個背景圖像（這是一個漸變），然後用純色填充其餘部分？

如果是這樣，在Photoshop（或您選擇的圖像編輯器）中，獲取漸變中最後一個像素的十六進制。爲了論證的緣故，我們假設它是＃FF0000。那麼做到這一點：

.myDiv { 
    background: #FF0000 url(green_bg.gif) repeat-x 0 0; 
} 

這將填補＃FF0000（紅色），你的背景和覆蓋在它上面的背景圖像，重複水平（X軸）開始在你的div的頂部。使紅色背景顯示的方法是增加div中的內容量。另外，如果你想確保漸變的某個部分總是顯示，你可以在你的CSS中增加padding-top。

.myDiv { 
    background: #FF0000 url(green_bg.gif) repeat-x 0 0; 
    padding-top: 20px; 
} 

如果這不是你所得到的，請澄清你的問題。

Answer 2

我會說背景SVG。但afaik他們只支持safari atm。

或者也許webkit有一個屬性，做梯度。或者如果你真的需要畫布。