Html 如何使用css添加垂直渐变?
我的垂直子菜单如下所示:Html 如何使用css添加垂直渐变?,html,css,gradient,Html,Css,Gradient,我的垂直子菜单如下所示: <div id="dropdown_menu" class="menu"> <ul> <li> <a>First Link</a></li> <li> <a>Second Link</a></li> </ul> </div> 第一环节 第二环节 我把背景的底部放在css类“menu”中,背景的顶部放在.menu中。现在
<div id="dropdown_menu" class="menu">
<ul>
<li> <a>First Link</a></li>
<li> <a>Second Link</a></li>
</ul>
</div>
- 第一环节
- 第二环节
我把背景的底部放在css类“menu”中,背景的顶部放在.menu中。现在,我有一个从上到下改变颜色的垂直渐变(在整个垂直菜单中),所以我不能把它放在。是否可以在不更改html的情况下添加垂直渐变
#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渐变。)
这在Opera中不起作用(尽管可能有我不知道的-o-gradient
属性)
或者,你可以使用规则的背景图像,重复相应。
< P>我个人认为X重复背景图像是目前最好的解决方案。 过滤器不提供跨浏览器兼容性保证,所以现在你最好还是沿用老方法。。 通过这种方式实现结果的方法是:.gradient {
background: #xxx url(pathtoimagedirfromcssfile/background.jpg) center top repeat-x;
}
其中#xxx是背景色代码,中间和顶部是要重复的图像的起始位置