Question

有一个由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。

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

Answer 1

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

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

Answer 2

您必须检查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线性。

渐变在Microsoft Edge中无法正确显示

2 个答案: