Question

我正在尝试使用$background-color文件中的variables.scss变量为我的应用设置背景颜色。只设置一种颜色（例如#000或#fff）时，此功能正常，但无法使其适用于渐变。

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

此代码抛出以下Sass错误：

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

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

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 - Creating beautiful Sidemenus （YouTube）的高度启发

Answer 2

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

在home.html中，home标记中应该有一个名为ion-content的类：
```
<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文件中插入此行代码。

ionic run android中的Terminal和... {你有home页面的渐变背景！

完成！

Answer 3

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

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

离子2中的背景颜色渐变

3 个答案: