html - CSS 线性渐变未显示在 Rails 中

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

您的设计师很可能使用 prefix free ，要修复它只需添加前缀:

 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%);

您将需要使用 gradient generator如果你想针对 IE