CSS中从透明到颜色的渐变答案

【问题标题】：Gradient from transparent to color in CSSCSS中从透明到颜色的渐变
【发布时间】：2016-07-18 07:01:14
【问题描述】：

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

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

我怎样才能让结果看起来一样？

【问题讨论】：

因为我不知道这样做的效果
我不明白你的意思？ opacity 应该在许多浏览器中执行此操作。你的问题到底是什么？
为什么不在图像创建程序中制作透明条？
@Pekka 我认为他想要一个透明的渐变，从无开始并以白色结束。
@Kyle Sevenoaks：我会尝试测试

标签： html css

【解决方案1】：

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

在 2014 年的最终语法中：

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

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

【讨论】：

这将适用于 Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0 及更高版本，因为它是 Mozilla 特定的代码。他唯一的问题是代码没有按照他的意愿做，所以我不认为他需要帮助才能使其跨浏览器。如果它需要在所有浏览器上工作，他还有另一个问题，因为并非所有的网络浏览器都是图形开始的......
@KevinCampion 那是因为它是改变的非最终语法。我已更新答案以使用 2014 年的最终语法。
我要补充一点，有些浏览器不会预乘 alpha 通道......这是什么意思？透明区域（有颜色，但 alpha 通道为 0%）实际上泄漏了它们的颜色。 transparent实际上是rgba(0, 0, 0, 0)（透明黑色），结果是透明边缘（左边缘）有一些黑色泄漏。 底线：对于OP期望的效果，我宁愿使用rgba(255, 255, 255, 0)（透明白色）。

【解决方案2】：

试试看：

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

【讨论】：

【解决方案3】：

你需要使用 alpha (rgba) 看看，可能对你有帮助：CSS3 Transparency + Gradient

【讨论】：

【解决方案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 两侧添加一些淡入淡出效果

【讨论】：