Проблемы с линейным градиентом CSS3 с разными браузерами

Question

Я пытаюсь добавить прозрачный линейный градиент в div и заставить его работать в разных браузерах, кажется, не так просто.

background-image:-moz-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%); 
background-image:-webkit-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%); 
background-image:-o-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%); 
background-image:-ms-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%); 
background-image: linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%); 

Это не работает ни в каком браузере. Если я удалю все строки , кроме-moz-linear-gradient, он работает в Firefox. Как так?

Сообщение об ошибке «Неверное значение свойства». Но поскольку он работает только с представленным поставщиком -moz-, я думаю, что ценности должны быть хорошими?

Answer 1

Они не работают, потому что ничего, кроме вашего синтаксиса -moz-linear-gradient, неверно. Правильный синтаксис для других приведен в нижеприведенном фрагменте для вашей справки. (Заменить красный с $ вторичной цвет.)

• Синтаксис -webkit-linear-gradient поддерживает две боковые синтаксисом, но выглядит как center не является допустимым значением. Так, например, left top или left bottom в качестве первого параметра приведет к диагональному градиенту, но left center не производит выход.
• Стандарт linear-gradient свойство не использует side side как первый параметр. В качестве первого параметра он использует to [side] [side]. Таким образом, диагональный градиент будет иметь вид to left top или to left bottom, тогда как горизонтальный градиент будет to left или to right.

Даже в MDN, то center не является допустимым значением для -moz-linear-gradient функции и поэтому его удивление, что Firefox способен работать с этим значением. Возможно, он просто игнорирует недопустимое значение, тогда как другие браузеры игнорируют все значение свойства +.

-moz-линейным градиентом ([[[наверх | снизу] || [влево | вправо]],] < цвет-стоп> [, цвет <-стоп>] +?);

body{ 
 
    min-height: 100vh; 
 
    background-image: -webkit-linear-gradient(left, red, rgba(255, 82, 66, 0) 52%); 
 
    background-image: -moz-linear-gradient(left center, red, rgba(255, 82, 66, 0) 52%); 
 
    background-image: -o-linear-gradient(left, red, rgba(255, 82, 66, 0) 52%); 
 
    background-image: linear-gradient(to right, red, rgba(255, 82, 66, 0) 52%); 
 
}