CSS 线性渐变未显示在 Rails 中

发布于 2024-12-29 17:20:39 字数 483 浏览 0 评论 0原文

我们的设计师使用 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。任何帮助将不胜感激！

原文

Our designer created a mockup of our frontend using HTML and CSS. However, when I copy the code to my rails app, some of it is not working properly.

Below is the CSS that is failing:

#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;

}

It's suppose to show a purple colour as the background but it's not. My guess is linear-gradient is not getting picked up. Everything else in the CSS seems to work fine.

I'm using Rails 3.1. Any help would be appreciated!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

‖放下 2025-01-05 17:20:39

您的设计师很可能使用无前缀，只需添加前缀即可修复它：

 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 为目标，则使用渐变生成器

Your designer is most likely using prefix free, to fix it just add the prefixes:

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

You will need to use a gradient generator if you want to target IE

回复收藏 0 原文