Html CSS中从透明到颜色的渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4163637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gradient from transparent to color in CSS
提问by khanh
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
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
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?
我怎样才能让结果看起来一样？
回答by Peter
Your gradient is defined as going from 'white' to 'white'. In other words, there is no gradient.
您的渐变被定义为从“白色”到“白色”。换句话说，没有梯度。
In the final 2014 syntax:
在 2014 年的最终语法中：
background-image: linear-gradient(to right, transparent, white);
Note that prefixed versions (moz-, webkit-, o-, etc) use a different syntax, for backwards compatibility.
请注意，前缀版本（moz-、webkit-、o- 等）使用不同的语法，以实现向后兼容性。
回答by rgba255
try it:
尝试一下：
background: -moz-linear-gradient(left center, transparent, white) repeat scroll 0 0 transparent;
回答by Hannes
You need to use alpha (rgba) look at that, may help you: CSS3 Transparency + Gradient
你需要使用 alpha (rgba) 看看，可能对你有帮助：CSS3 Transparency + Gradient
回答by adedoy
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
我用它在我的 hr 的两侧添加一些淡化效果
