web-dev-qa-db-ja.com

ionic 4にグラデーション背景を設定

数ページのみにグラデーション背景を追加しようとしていますが、

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
}

これは機能していません、どこが間違っているのかわかりますか？これを機能させるために他に必要なことはありますか？.

angularionic-frameworkangular6ionic4
4
akshay ramesh

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

これが テーマガイド です

5
user184994

このようにしてみてください...

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;
 }
0
Alireza Yazdani