【问题标题】:How to add vertical gradient using css?如何使用css添加垂直渐变?
【发布时间】:2010-10-08 18:56:23
【问题描述】:

我有如下垂直子菜单:

<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 的情况下添加垂直渐变?

【问题讨论】:

    标签: html css gradient


    【解决方案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 属性。

    或者,您可以使用常规背景图像,并相应地重复。

    【讨论】:

      【解决方案2】:

      我个人认为x-repeated背景图片是目前最好的解决方案。 过滤器不为您提供跨浏览器兼容性保证,因此您现在最好坚持使用旧方法.. 以这种方式实现结果的方法是:

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

      其中#xxx为背景色码,center & top为重复图片的起始位置

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-07-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-12-05
        相关资源
        最近更新 更多