CSS中从透明到颜色的渐变

Question

我的老板给我一张图片（请看下面）并告诉他我会让他的网站看起来一样。这是我的代码，但它看起来不像图像：

HTML

<div class="clearfix" id="footer">
  <ul>
    <li><a href="/pages/facility">Become a Virtual Active Facility</a></li>
    <li><a href="/pages/about">About Us</a></li>
    <li class="last"><a href="/pages/contact">Contact</a></li>
  </ul>
</div>

CSS

#footer {
    background: -moz-linear-gradient(left center, white, white) repeat scroll 0 0 transparent;
    margin-bottom: 25px;
    margin-top: 25px;
    opacity: 0.6;
    padding: 10px 25px;
    width: 914px;
}

如何让结果看起来一样？

Answer 1

您的渐变定义为从“白色”变为“白色”。换句话说，没有渐变。

在2014年的最终语法中：

background-image: linear-gradient(to right, transparent, white);

请注意，前缀版本（moz-，webkit-，o-等）使用不同的语法，以实现向后兼容。

Answer 2

试一试：

background: -moz-linear-gradient(left center, transparent, white) repeat scroll 0 0 transparent;

Answer 3

你需要使用alpha（rgba）看看，可以帮助你：CSS3 Transparency + Gradient

Answer 4

这个适用于我

background: -moz-linear-gradient(
                left,
                rgba(0,0,0,0.001) 0%,
                rgba(201,201,201,1) 50%,
                rgba(0,0,0,0.001) 100%
                );

我用它在我的hr的两边添加一些淡入淡出效果