离子3:梯度背景

Question

通过在variables.scss中设置$background-color来更改离子应用的背景颜色很容易，但它与渐变或图像无法使用。我很惊讶我找不到有关此的任何正式文件，也没有很多有用的问题和答案。

如果将$background-color设置为非颜色，您当前将从基于背景颜色计算其颜色的许多离子组件之一中获得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仅占用标题/Navbar和页脚/标签之间的空间，但实际上是由Ionic造型的，可以填充整个屏幕。因此，您从上到下都有梯度。成功。