在Ionic 4中设置渐变背景

时间:2018-11-04 16:08:32

标签: angular ionic-framework angular6 ionic4

我试图仅在几页上添加渐变背景,

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
}

这不起作用,我能知道我要去哪里了吗?为了使此功能正常工作,我还有什么需要做的。

2 个答案:

答案 0 :(得分:3)

在ionic 4中,您需要使用CSS变量为>>> s 0 0 1 1 2 2 3 3 4 4 dtype: int64 >>> s.replace([2,3,4], 5) 0 0 1 1 2 5 3 5 4 5 dtype: int64 设置主题。

只需如下更改CSS规则:

ion-content

这里是theming guide

答案 1 :(得分:0)

尝试这样...

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