在 ionic 4 中设置渐变背景

Question

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

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
}

这是行不通的，我能知道我哪里出错了吗？我还需要做些什么才能让这个工作正常吗？

Answer 1

这样试试...

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;
 }

Answer 2

在 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

在 ionic 4 中设置渐变背景

Set gradient background in ionic 4

ionic-framework

angular

ionic4

angular6