Ionic 3：渐变背景

【问题标题】：Ionic 3: Gradient backgroundIonic 3：渐变背景
【发布时间】：2017-12-19 22:38:46
【问题描述】：

通过在variables.scss 中设置$background-color 可以轻松更改Ionic App 的背景颜色，但它不适用于渐变或图像。我很惊讶我找不到任何官方文档，也找不到很多有用的问题和答案。

如果您将 $background-color 设置为非颜色，您当前会从根据背景颜色计算其颜色的众多 Ionic 组件之一中获得 Sass 错误。

【问题讨论】：

【解决方案1】：

这就是我最终要做的事情，首先是src/theme/variables.scss：

$app-background: linear-gradient(to bottom, color($colors, light) 0%, color($colors, dark) 100%);
$background-color: transparent;
$toolbar-background: transparent;

普通背景和工具栏必须是透明的，才能在下面显示渐变。我们在src/app/app.scss中应用渐变：

ion-content {
    background: $app-background;
}

您可能认为ion-content 只占用您的页眉/导航栏和页脚/选项卡之间的空间，但实际上由 Ionic 设置样式以填满整个屏幕。所以你得到了从上到下的渐变。成功。

【讨论】：