Question

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

如果将$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设置的，以填充整个屏幕。所以你从上到下得到了渐变。 <强>成功

离子3：渐变背景

1 个答案: