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

Question

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

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

Я помещаю нижнюю часть фона в css class 'menu'., Верхнюю часть фона в .menu ul. Теперь у меня есть один вертикальный градиент, который меняет цвет сверху вниз (во всем вертикальном меню), и поэтому я не могу поместить его в .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+ */
}

См. Фактическую реализацию здесь: http://www.salonbelledesoir.com (Градиенты по краю являются CSS-градиентами.)

Это не будет работать в Opera (хотя может быть свойство -o-gradientо котором я просто не знаю.

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

Answer 2

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

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

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