Nativescript background-imageフルスクリーン

Question

Nativescriptでアプリを作成して、ページ上のフルスクリーンイメージで作成したいと考えています。私はbackground-image: url('~/images/background.jpg');を使用しなければならない。しかし、それをフルスクリーンにする方法。 ご協力ありがとう

Answer 1

これを実現するには、NativeScript対応のCSS propertiesを使用する必要があります。

前に<Page>ビューに添付された背景画像に次のCSSを使用しました。うまくいきました。

.coverImage { background-image: ~/images/kiss.jpg; background-repeat: no-repeat; background-position: center; background-size: cover; }

Answer 2

あなたは角度でnativeSciptを使用している場合は、あなたが使用することができます。

/*In your .css: */ 
 

 
.my-class { 
 
    background-image: url("res://image-name.png"); 
 
    background-repeat: no-repeat; 
 
    
 
}

<!-- in your .html: --> 
 

 
<ScrollView class="my-class">

Answer 3

あなたは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クラスを割り当てます。