Как добавить вертикальный градиент с помощью css?

Question

У меня есть вертикальное подменю, как в:.

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

Я помещаю нижнюю часть фона в классе CSS «меню», верхний срез фона в .menu ул. Теперь у меня есть один вертикальный градиент, который меняет цвет сверху вниз (в целом по вертикальному меню), и поэтому я не могу поместить его в .menu ul li. Можно ли добавить вертикальный градиент без внесения каких-либо изменений в html?

Answer 1

#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 свойством, что я просто не знаю, о .

Или, вы можете использовать обычные фоновые изображения, повторяющиеся соответственно.

Answer 2

Я лично рассмотреть й повторяющийся фоновое изображение, чтобы быть лучшим решением в настоящее время. Fil Ослабляет не дают никаких гарантий совместимости с различными браузерами, поэтому вам лучше придерживаться старых способов сейчас .. путь к достижению результата этот путь:

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

где #XXX это цвет фона код, центр & наверху - начальная позиция изображения, которое необходимо повторить