CSS中从透明到颜色的渐变

Question

My Boss give me an image (please see below) and told him I would make his site look the same. Here is my code, but it doesn't look like the image:

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;
}

How can I get the result to look the same?

Answer 1

Your gradient is defined as going from 'white' to 'white'. In other words, there is no gradient.

In the final 2014 syntax:

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

Note that prefixed versions (moz-, webkit-, o-, etc) use a different syntax, for backwards compatibility.

Answer 2

试试吧：

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

Answer 3

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

Answer 4

This one works for me

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%
                );

I use it to add some fade effect on both side of my hr