渐变在 Microsoft Edge 中未正确显示答案

【问题标题】：Gradient not displaying correctly in Microsoft Edge渐变在 Microsoft Edge 中未正确显示
【发布时间】：2018-11-12 17:31:55
【问题描述】：

有一个ADOBE illustrator生成的渐变，CSS代码如下：

.firs{
    background: #4B79A1;
    background : -moz-linear-gradient(.....) 100%);
    background : -webkit-linear-gradient(.....) 100%);
    background : -webkit-gradient(....),color-stop(.....) ));
    background : -o-linear-gradient(.....) 0%, rgba(......) 0%, rgba(......) 25.17%, rgba(.........) 50.5%, rgba(.......) 75.17%, rgba(.......) 100%);
    background : -ms-linear-gradient(........) 0%, rgba(........) 0%, rgba(.........., 1) 25.17%, rgba(............., 1) 50.5%, rgba(..........., 1) 75.17%, rgba(............., 1) 100%);
}

渐变 CSS 在 Chrome 和 Firefox 中运行流畅，但在 Edge 中，它变成了like this。

有什么办法可以解决这个问题吗？

【问题讨论】：

能否分享相关的html和css样式代码，方便我们自己测试？另外，当你在chrome或火狐浏览器中测试样例时，最好截个图贴出来，这样我们可能更容易知道你想要什么。
我已经把上面的图片贴出来了

标签： html css gradient microsoft-edge

【解决方案1】：

你必须检查你的 rgba() 函数。按照惯例 rgb 是混合色或颜色红-绿-蓝颜色面板产生不同类型的颜色。但是 a(alpha) 是用于优化颜色可视化。 1 设置为 true 即 100% 或可见，0 设置为 false 是不可见的。

正如我在您的代码中看到的，-ms-linear-gradient(......., 1). 您需要了解 linear-gradient() 函数使用自上而下、从左到右、从右到左或自下而上方法。在您的情况下，您使用的是自上而下的方法。但问题是你是对边缘使用 100% 不透明度，您无法正确获得渐变。

尝试使用以下方法优化您的线性函数： -ms-linear-gradient(......., 0.5) 或 -ms-linear-gradient(......., 0.45) 这是直译为 50% 或 45% alpha 线性。

【讨论】：

【解决方案2】：

您是否尝试过来自gradient generator 的代码？我认为下面的代码应该可以工作

linear-gradient(to right, rgba(...) 0%, rgba(...) 50%, rgba(...) 51%, rgba(...) 100%)

【讨论】：