web-dev-qa-db-ja.com

Nativescript背景画像フルスクリーン

ページにフルスクリーン画像を使用してNativescriptでアプリを作成したい。 background-image: url('~/images/background.jpg');を使用する必要があります。しかし、それをフルスクリーンにする方法。ご協力いただきありがとうございます

nativescript
11
Pamungkas Jayuda

これを実現するには、NativeScriptでサポートされている CSSプロパティ を使用する必要があります。

以前に<Page>ビューに添付された背景画像に次のCSSを使用したことがあり、正常に動作します。

.coverImage {
    background-image: url('~/images/kiss.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
26
Brad Martin

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 */
}

注：このCSSクラスをPageに割り当てます。

8
Onur Yıldırım

angularでnativeSciptを使用している場合は、以下を使用できます。

/*In your .css: */

.my-class {
    background-image: url("res://image-name.png") no-repeat;
}
<!-- in your .html: -->

<ScrollView class="my-class">
4
gandhi Mena

これは私のために働きました：

constructor(private page: Page) { }

ngOnInit() {
  this.page.actionBarHidden=true;`
  this.page.backgroundImage = 'res://gold_bg';
  this.page.style.backgroundSize='cover';
  this.page.style.backgroundRepeat='no-repeat';
}
0
Per Høyer

これはアニメーションGIFでは機能しません。私のスタイル：

.page{
    background-image: url("~/assets/images/animated.gif") black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Gifが表示され、中央に配置され、拡大されているので素晴らしいですが、静的です。アニメーションは移動しません。

0
hgc2002