実際のBGイメージなしでこの背景を描くにはどうすればいいですか？

Question

Ionic2を使ってアプリケーションをビルドして、私のアプリのバックグラウンドに背景を追加する必要があります： とIそのために画像をインポートしたくない（html5キャンバス& /またはCSS3を使用）。

誰でも私を助けることができますか？

{ 
    width: 100%; 
    height: auto; 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    background-color: #01c4cd; 
} 

ありがとう：

は、ここに私のCSSです！

Answer 1

キャンバスや背景画像は必要ありません。

#background { 
 
    width: 300px; 
 
    height: 400px; 
 
    
 
    background-image: 
 
     
 
    /* Line 1 */ 
 
    linear-gradient(45deg, rgba(255,255,255,0) 63%,rgba(255,255,255,0.1) 64%,rgba(255,255,255,0) 65%), 
 
     
 
    /* Line 2 */ 
 
    linear-gradient(45deg, rgba(255,255,255,0) 78%,rgba(255,255,255,0.1) 79%,rgba(255,255,255,0) 80%), 
 
    
 
    /* Blue background gradient */ 
 
    linear-gradient(45deg, #1f579b 0%,#7bdce5 100%); 
 
}

<div id="background"></div>

はこれを達成するには、いくつかの異なる方法がありますが、この例では1つのバックグラウンドでフルサイズの青のグラデーションとのdiv、および2つあります：あなたは、CSSのグラデーションでこれを達成することができますオーバーレイすると、小さな白いグラデーションがラインを作成します。あなたはあなたが探している効果を得るために、より多くの行を追加し、色を変更することができます。

linear-gradientステートメントを組み合わせてファイルサイズを小さくすることもできますが、可読性を向上させるために別途用意されています。