Ionic 2の背景色のグラデーション

Question

$background-color変数を使用してvariables.scssファイルの背景色を設定しようとしています。これは、#000や#fffのような色を設定してもうまく動作しますが、グラデーションでは機能しません。

argument '$color' of 'rgba($color, $alpha)' must be a color Backtrace：

$background-color: linear-gradient(to bottom, #000 0%, #fff 100%);

このコードは、次のサスエラーがスローされます。

背景色をグラデーションに設定するにはどうすればよいですか？

Answer 1

これは自分の背景グラデーションに使用するscssコードです。

$SIDEMENU_TOP: #A23C4B; 
$SIDEMENU_BOTTOM: #ff9068; 
$SIDEMENU_TRANSPARENCY: rgba(255,255,255,0.4); 


.side-menu-gradient{ 
    background: -webkit-gradient(left top, $SIDEMENU_TOP, $SIDEMENU_BOTTOM); 
    background: -o-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM); 
    background: -moz-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM); 
    background: linear-gradient(to bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM); 
} 

（たぶん非常にIonic Creator - Creating beautiful Sidemenus（YouTubeのからインスピレーションを得た）

Answer 2

ページの背景色を設定したい場合は、たとえばhome.htmlページのために、勾配に、あなたは、これら二つの手順に従ってください： home.htmlで

1. あなたはion-contentタグにhomeというクラスを持っている必要があります。

   を

   .home { 
       background: linear-gradient(to bottom, #000 0%, #fff 100%); 
   } 
   

2. このSASSがapp.cssファイルにインポートすることでコンパイルされていることを確認します：

   home.scssファイル（あなたはそれを持っていない場合は作成）とhomeクラスを定義する

   <ion-content padding class="home"> 
       ... 
   </ion-content> 
   

   ゴー

   @import "../pages/home/home"; 
   

あなたapp.cssファイル内のコード行を挿入します。

Terminalでionic run androidを実行してください... homeページのグラデーションの背景があります。

完了！