有一个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 .
有没有办法解决这个问题?
最佳答案
您必须检查您的 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 线性。
关于html - 渐变在 Microsoft Edge 中未正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53267273/