CSS渐变中出现轻微的实线？渐变不平滑答案

【问题标题】：Slight solid line appearing in a CSS gradient? The gradient is not smoothCSS渐变中出现轻微的实线？渐变不平滑
【发布时间】：2012-03-22 00:16:48
【问题描述】：

我有一个页面，其中正文设置为背景色。我有一个固定位置的页脚，位于其后面滚动的一些文本上方。

我已使用 css3 渐变来尝试创建一种淡入淡出效果，但似乎在渐变的某处出现了一条更亮的线。任何删除此行的提示将不胜感激。理想情况下，我希望避免使用图像，因为不同页面的颜色会动态变化，因此不必为每种颜色都创建新的背景图像会很好。

我创建了一个jsbin来演示：

我还截取了屏幕截图并在 Photoshop 中增加了对比度/大小，这证实确实有一条线出现：

【问题讨论】：

【解决方案1】：

当您使用 rgba 值时，这似乎是一个浏览器错误。

您想要达到的效果可以通过 CSS 掩码来完成。

对于 FF，您可以使用 SVG 解决方案：

【讨论】：