离子3:梯度背景

Question

通过在$background-color中设置variables.scss很容易改变Ionic应用程序的背景色，但是它不能处理渐变或图像。我感到惊讶的是，我没有找到任何关于这方面的正式文件，也没有找到许多有用的问题和答案。

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

Answer 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的样式来填充整个屏幕。所以你从上到下得到了梯度。成功.