如何使用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 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是背景颜色代码，center & 是背景颜色代码。 top 是要重复的图像的起始位置