Nativescript background-image tam ekran

Question

Tam ekran resmi ile Nativescript'te uygulama oluşturmak istiyorum. background-image: url('~/images/background.jpg'); kullanmalıyım. Ama tam ekran nasıl yapılır. Yardımınız için yardım ilet.

Answer 1

Bunu başarmak için desteklenen NativeScript CSS properties'u kullanmanız gerekir.

Daha önce <Page> görünümüne eklenmiş bir arka plan görüntüsünde aşağıdaki CSS'yi kullandım ve iyi çalışıyor. Eğer Açısal ile nativeScipt kullanıyorsanız

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

Answer 2

, şunları kullanabilirsiniz:

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

İsterseniz Page tam ekran görüntü arka olması, resimlerinizi ekleyin /App_Resources'a gidin ve bunu bileşeninizde yapın:

export class MyComponent implements OnInit { 
    constructor(private page:Page) {} 
    ngOnInit() { 
     this.page.actionBarHidden = true; 
     this.page.backgroundImage = "res://bg-image"; 
    } 
} 

Güncelleme: Tam ekranı zorlamak için CSS'yi ekleyebilirsiniz.

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

Not: Page bu CSS sınıfı atayın.