时间戳

首页 > 解决方案 > 渐变在 Microsoft Edge 中未正确显示

html - 渐变在 Microsoft Edge 中未正确显示

问题描述

有一个 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 中，它变成了这样。

有没有办法解决这个问题？

标签： htmlcssgradientmicrosoft-edge

解决方案

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

推荐阅读