Nativescriptでアプリを作成して、ページ上のフルスクリーンイメージで作成したいと考えています。私はbackground-image: url('~/images/background.jpg');
を使用しなければならない。しかし、それをフルスクリーンにする方法。 ご協力ありがとうNativescript background-imageフルスクリーン
答えて
これを実現するには、NativeScript対応のCSS propertiesを使用する必要があります。
前に<Page>
ビューに添付された背景画像に次のCSSを使用しました。うまくいきました。
.coverImage { background-image: ~/images/kiss.jpg; background-repeat: no-repeat; background-position: center; background-size: cover; }
あなたは角度でnativeSciptを使用している場合は、あなたが使用することができます。
/*In your .css: */
.my-class {
background-image: url("res://image-name.png");
background-repeat: no-repeat;
}
<!-- in your .html: -->
<ScrollView class="my-class">
あなたはPage
がフルスクリーン画像の背景を持つようにしたい場合は、あなたの画像を追加/App_Resources
に変更してください。
export class MyComponent implements OnInit {
constructor(private page:Page) {}
ngOnInit() {
this.page.actionBarHidden = true;
this.page.backgroundImage = "res://bg-image";
}
}
更新:フルスクリーンを適用するCSSを追加することができます。
.page {
/* background-image: url("res://bg-image") */
background-size: cover;
background-repeat: no-repeat;
/* background-attachment: fixed; */ /* not supported in {N} yet */
background-position: center top; /* instead set ypos to top to avoid scroll-up */
}
注:お使いのPage
に、このCSSクラスを割り当てます。
これは、不幸なことですがフルスクリーンには適用されません。 –
@BenMorrisは、更新された回答があなたに役立つかどうかを確認します。 –
これはCSSで動作しますが、残念なことに、CSSを使用すると、ソフトキーボードが表示されたときに背景画像が押し上げられます。 –
- 1. ボタンBackgroundImageプロパティ
- 2. TCPDF autopagebreak + backgroundimage
- 3. Nativescript addSubview
- 4. NativeScript - 2.
- 5. Nativescript canvas
- 6. WinForms:ListViewのBackgroundImageの配置
- 7. nativescriptでストリーミングjson
- 8. Nativescript RadListViewスクロールY
- 9. NativeScriptのCSSグラデーション
- 10. nativescriptでリフレッシュする
- 11. JMenuBarをカスタマイズする(例:BackgroundImage、ハイライトカラー、...)
- 12. Vue.jsデータバインドスタイルbackgroundImageが動作しない
- 13. NativeScript公開/グローバル関数
- 14. NativeScriptでのオーバーレイの配置
- 15. ScrollViewの無効化NativeScript
- 16. Nativescript;コマンドラインでのインストールnpm
- 17. 失敗した実行nativescript -
- 18. MQTT NPMモジュールをNativeScriptにインポート
- 19. MVCフルスクリーン
- 20. フルスクリーンwpf
- 21. UISearchBarフルスクリーン
- 22. cmdフルスクリーン
- 23. NativeScriptでリピーターのアイテムの高さをアニメーション
- 24. サードパーティのプッシュサービスでNativescriptプッシュ通知
- 25. (Nativescript/Angular2)ユーザーのログインを維持する
- 26. NativescriptでArrayListを使用する方法
- 27. 削除]ボタンの境界線 - nativescript
- 28. Apple/AndroidでnativeScriptを支払う
- 29. JavaScriptをインストールするNativeScript用AWS SDK
- 30. orientdbとnativescriptの接続方法
お試しください。最小限で完全で検証可能な例を提供してください。[MVCE](http://stackoverflow.com/help/mcve) – wiredniko