Ionic 2 中的背景颜色渐变答案

【问题标题】：Background color gradient in Ionic 2Ionic 2 中的背景颜色渐变
【发布时间】：2018-12-07 03:40:04
【问题描述】：

我正在尝试使用variables.scss 文件中的$background-color 变量为我的应用设置背景颜色。这在仅设置颜色时可以正常工作，例如 #000 或 #fff，但不能使其与渐变一起使用。

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

此代码引发以下 Sass 错误：

argument '$color' of 'rgba($color, $alpha)' must be a color Backtrace.

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

【问题讨论】：

你能解决这个问题吗？我自己也遇到了同样的问题......
不，不幸的是，我最终只使用了一种颜色而不是渐变

标签： css sass ionic2

【解决方案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 - Creating beautiful Sidemenus（YouTube）的高度启发

【讨论】：

【解决方案2】：

如果你想设置一个页面的背景颜色，例如home.html页面，为一个渐变，你应该遵循以下两个步骤：

在home.html 中，您应该在ion-content 标签中有一个名为home 的类：
```
<ion-content padding class="home">
   ...
</ion-content>
```
转到home.scss 文件（如果没有，请创建一个）并定义home 类：
```
.home {
    background: linear-gradient(to bottom,  #000 0%, #fff 100%);
}
```
通过将其导入app.css 文件来确保正在编译此 sass：
```
@import "../pages/home/home";
```

在您的app.css 文件中插入这行代码。

在您的Terminal 中执行ionic run android 并且...您的home 页面将具有渐变背景！

完成！

【讨论】：

【解决方案3】：

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

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

【讨论】：