Градиент не воспроизводится правильно в Microsoft Edge - PullRequest
Новая
       12

Градиент не воспроизводится правильно в Microsoft Edge

0 голосов
/ 12 ноября 2018

Существует градиент, созданный иллюстратором ADOBE, и код 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 он становится вот так .

Есть ли способ решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

Вы должны проверить свою функцию rgba ().По соглашению RGB - это смесь или цветовая панель красно-зелено-синего цвета для получения другого типа цвета.Но (альфа) используется для оптимизации цветовой визуализации.1 установлено в значение true, которое равно 100% или видимое, 0 установлено в значение false, что невидимо.

Как я вижу в вашем коде, -ms-linear-gradient(......., 1). Вы должны понимать, что функция linear-gradient() использует нисходящий, слева направо, справа налево или снизу вверх.В вашем случае вы используете нисходящий подход.Но проблема в том, что вы используете 100% непрозрачность с краем, и вы не можете получить градиент правильно.

Попробуйте оптимизировать свою линейную функцию примерно так: -ms-linear-gradient(......., 0.5) или -ms-linear-gradient(......., 0.45), что буквально переводится как 50% или 45% альфа-линейная.

0 голосов
/ 12 ноября 2018

Вы пробовали код из генератора градиента ? Я думаю, что код, как показано ниже, должен работать 

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