Ionic 2中的背景颜色渐变

Question

我正在尝试使用variables.scss文件中的$background-color变量设置应用程序的背景颜色。当只设置一个颜色时，比如#000或#fff，这个方法可以正常工作，但是无法使用渐变。

$background-color: linear-gradient(to bottom, #000 0%, #fff 100%);

这段代码会引发以下Sass错误：

'rgba($color，$alpha)'的参数'$color'必须是一个颜色 Backtrace。

那么，我该如何将背景颜色设置为渐变色呢？

- Alexandru Pufan

---

你能解决这个问题吗？我自己也遇到了同样的问题... - veljkoz

不好意思，我最终只使用了一个颜色而不是渐变。 - Alexandru Pufan

Answer 1

这是我自己使用的背景渐变 scss 代码。

$SIDEMENU_TOP: #A23C4B;
$SIDEMENU_BOTTOM: #ff9068;
$SIDEMENU_TRANSPARENCY: rgba(255,255,255,0.4);


.side-menu-gradient{
    background: -webkit-gradient(left top, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
    background: -o-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
    background: -moz-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
    background: linear-gradient(to bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
}

(可能高度启发自Ionic Creator - 创建美丽的侧边菜单（YouTube）

- Ivar Reukers

Answer 2

如果你想将页面（例如home.html）的背景颜色设置为渐变色，需要遵循以下两个步骤：

1. In home.html you should have a class called home in the ion-content tag:

   <ion-content padding class="home">
      ...
   </ion-content>
   

   Go to home.scss file (create one if you do not have it) and define the home class:

   .home {
       background: linear-gradient(to bottom,  #000 0%, #fff 100%);
   }
   

2. Make sure this sass is being compiled by importing it into app.css file:

   @import "../pages/home/home";
   

将下面的代码插入到您的app.css文件中。

在您的终端中执行ionic run android，然后...您将拥有一个渐变背景用于您的主页！

完成！

- Stefan

Answer 3

$background-color变量不起作用，使用$app-background

例如： $app-background: linear-gradient(to bottom, #000 0%, #fff 100%);

- saucecodee