在 ionic 4 中设置渐变背景答案

【问题标题】：Set gradient background in ionic 4在 ionic 4 中设置渐变背景
【发布时间】：2018-11-08 02:13:56
【问题描述】：

我正在尝试只为几页添加渐变背景，

login.page.html

<ion-header>

</ion-header>

<ion-content padding class="bg-class">
   <p>lorem</p>
</ion-content>

_login.page.css

.bg-class{
    background-image: linear-gradient(197deg, rgba(100,100,100,1) 0%, rgba(63,63,63,1) 13.5%, rgba(29,29,29,1) 33.33%, rgba(0,0,0,1) 100%) !important
}

这不起作用，我能知道我哪里出错了吗？我还需要做什么才能让这个工作正常吗？

【问题讨论】：

当我在 Stackblitz 中尝试时似乎工作正常...stackblitz.com/edit/ionic-tgvqfw?file=pages%2Fhome%2Fhome.css
除了像导入和声明这样定义 CSS 之外，我还需要做什么吗？
如果你还没有这样做，你需要确保你的组件设置了stylesUrls
styleUrls 存在，但它仍然不适合我。
根据您提供的信息，我无法重现该问题。你能创建一个 StackBlitz 来演示这个问题吗？

标签： angular ionic-framework angular6 ionic4

【解决方案1】：

在 ionic 4 中，您需要使用 CSS 变量来主题化 ion-content。

只需按如下方式更改您的 CSS 规则：

.bg-class{
  --background: linear-gradient(197deg, rgba(100,100,100,1) 0%, rgba(63,63,63,1) 13.5%, rgba(29,29,29,1) 33.33%, rgba(0,0,0,1) 100%) !important;
}

这里是theming guide

【讨论】：

谢谢它成功了。是否有所有变量列表可用的链接？
关于如何更改颜色离子文本边框的任何想法？
@akshayramesh 不幸的是，the page on their docs 似乎不起作用，但是如果您在浏览器中检查该页面，您可能能够在开发人员工具中找到它。 CSS变量都以--开头

【解决方案2】：

试试这样...

login.page.html

<ion-content padding>
  <div class="bg-class">
    <p>lorem</p>
  </div>
</ion-content>

_login.page.css

.bg-class{
           background-image: linear-gradient(197deg, rgba(100,100,100,1) 0%,rgba(63,63,63,1) 13.5%, rgba(29,29,29,1) 33.33%, rgba(0,0,0,1) 100%) !important;
 }

【讨论】：

这不是将渐变添加到整个屏幕。