CSS линейный градиент не отображается в рельсах

Question

Наш дизайнер создал макет нашего интерфейса с использованием HTML и CSS.Однако, когда я копирую код в мое приложение rails, некоторые из них не работают должным образом.

Ниже приведен код сбоя CSS:

#login h1 {

  font-size:17px;
  color:#fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  padding:5px 12px;
  margin-bottom:0;
  background-image: linear-gradient(top, #77659E 35%, #5A4B7A 77%);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;

}

Предполагается, что он показывает фиолетовый цветв качестве фона, но это не так.Я предполагаю, что линейный градиент не поднимается.Все остальное в CSS, кажется, работает нормально.

Я использую Rails 3.1.Любая помощь будет оценена!

Answer 1

Ваш дизайнер, скорее всего, использует без префикса , чтобы исправить это, просто добавьте префиксы:

 background-image: -webkit-linear-gradient(top, #77659E 35%, #5A4B7A 77%);
 background-image: -moz-linear-gradient(top, #77659E 35%, #5A4B7A 77%);
 background-image: linear-gradient(top, #77659E 35%, #5A4B7A 77%);

Вам нужно будет использовать генератор градиента , еслиВы хотите нацелиться на IE

Answer 2

Unprefixed linear-gradient свойство еще нигде не работает.

Необходимо добавить префиксы вендоров -webkit-, -moz-, -ms- и -o-, чтобы он работал в пяти основных браузерах (хотя IE всего 10+).

Пример: http://jsfiddle.net/fEB3m/