イオン性イオンとイオンヘッダーの背後に背景画像を置く

Question

<ion-header>と<ion-contentを含むページ全体にまたがるイオン2アプリのページの背景画像を持つことは可能ですか？

コンテンツの背景イメージとヘッダーの別の背景イメージを取得できますが、コンテンツとヘッダーの両方の背後にあるページ全体をカバーする1つのイメージを取得できません。

Answer 1

編集：これは実際には答えの一番下に置かれたが、それが良いと簡単な解決策なので、私はそれが一番上に移動するために理にかなって思った：

見つけようとしますが<ion-content>の中に要素（背景画像ホルダー）を配置する方法、絶対位置を固定し、ポインタ/タッチイベントの影響を受けないようにし、スクロール可能なコンテンツをその上に配置し、負のマージンを<ion-header>の高さに設定すると、 fullscreenディレクティブ<ion-content>です。
今のところ、backgroundを適用し、<ion-header>がtransparentであることを確認してください。

<ion-content fullscreen> 
    ... 
</ion-content> 

---

初期の答え：イオン2は、ページごとに<page-...>カスタムHTML要素を作成し、それはあなたのスタイルにしたい要素です。例えば、我々はloginページ（+ login.tslogin.html + login.scss）の話をされるだろう場合は、セレクタとしてpage-loginを使用する必要がありますので、要素が... ...のような

<page-login class="ion-page show-page ..." ...> 
    <ion-header>...</ion-header> 
    <ion-content>...</ion-content> 
</page-login> 

を探していることになります。

page-login { 
    background: #ccc url('../../assets/image/awesome.jpg') no-repeat 50% 50% /cover; 
    /** place any rules applying only on this page here **/ 
} 

また、この要素は、図示ion-pageと、show-pageのクラスのクラスを取得します。

通常、これはlogin.scssに行いますが、app.scssでも行うことができます。相対イメージパスが正しく動作することを確認してください（使用している場合）。

---

に注意してくださいいくつかの項目は、ion-app.mdと.content-mdのように、イオン2ではデフォルトでbackground-colorを持っています。適用する内容を確認するにはRemote debuggingを使用し、background-colorの値はtransparentに設定する必要があります。 <page-{name}>コンポーネントのスタイリングの

Aおそらく不要な効果は、イントロアニメーションがそのように、あなたのコンテンツが背景なしでスライドします<ion-content>に適用されていることです。現在のページの遷移を無効にすることでこれを修正できます。各ナビゲーション・イベントを使用すると、使用できるオプションの設定オブジェクト（第3のparam）を持つ：

NavController.push(LoginPage, {/*params*/}, {animate:false});