如何使用css添加垂直漸變？

我有垂直子爲下：如何使用css添加垂直漸變？

<div id="dropdown_menu" class="menu"> 
<ul> 
<li> <a>First Link</a></li> 
<li> <a>Second Link</a></li> 
</ul> 
</div>

我把底片背景的CSS類的「菜單」，在UL。菜單背景的頂部片。現在，我有一個垂直漸變，從上到下（在整個垂直菜單中）將顏色改變，因此我無法將它放入.menu ul裏。是否可以添加垂直漸變而不對html做任何改變？

來源

2010-10-08 svirk

#dropdown_menu { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF280C00', endColorstr='#004A1D00'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#280C00), to(rgba(75, 30, 0, 0))); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #280C00, rgba(75, 30, 0, 0)); /* for firefox 3.6+ */ 
}

見實際執行此處（周圍邊緣的梯度是CSS漸變）http://www.salonbelledesoir.com

這不會在Opera工作（雖然有可能是一個-o-gradient財產，我只是不知道。

或者，您也可以使用普通的背景圖像，相應地重複。

來源

2010-10-08 19:04:00

我個人認爲在x重複的背景圖像是目前最好的解決辦法。費爾TER值沒有給你跨瀏覽器兼容的保修，所以你不得不用舊的方式更好地堅持現在... 達到的效果這種方式是這樣的：

.gradient { 
    background: #xxx url(pathtoimagedirfromcssfile/background.jpg) center top repeat-x; 
}

其中#XXX是背景顏色代碼，中心&頂部是要重複圖像的起始位置

來源

2010-10-08 19:50:21 Lucius

如何使用css添加垂直漸變？

回答

相關問題