Voglio creare un'app in Nativescript con l'immagine a schermo intero sulla pagina. Devo usare background-image: url('~/images/background.jpg');
. Ma come renderlo a schermo intero. Grazie per l'aiutoNativescript background-image fullscreen
risposta
Per raggiungere questo obiettivo è necessario utilizzare il codice nativo supportato CSS properties.
Ho utilizzato il seguente CSS su un'immagine di sfondo collegata alla vista <Page>
e funziona correttamente.
.coverImage { background-image: ~/images/kiss.jpg; background-repeat: no-repeat; background-position: center; background-size: cover; }
se si sta utilizzando nativeScipt con angolare, è possibile utilizzare:
/*In your .css: */
.my-class {
background-image: url("res://image-name.png");
background-repeat: no-repeat;
}
<!-- in your .html: -->
<ScrollView class="my-class">
Se si desidera che il Page
di avere uno sfondo di immagini a schermo intero, aggiungere le immagini a /App_Resources
e farlo nel componente:
export class MyComponent implements OnInit {
constructor(private page:Page) {}
ngOnInit() {
this.page.actionBarHidden = true;
this.page.backgroundImage = "res://bg-image";
}
}
Aggiornamento: è possibile aggiungere CSS per applicare lo schermo intero.
.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 */
}
Nota: assegnare questa classe CSS al vostro Page
.
Questo non lo ridimensiona a schermo intero anche se sfortunatamente. –
@BenMorris verifica se la risposta aggiornata funziona correttamente. –
Funziona con i CSS, ma sfortunatamente se utilizzo un qualsiasi CSS, l'immagine di sfondo viene sollevata quando viene visualizzata la tastiera virtuale. –
- 1. iOS 8 NavigationBar BackgroundImage
- 2. NativeScript: custom telecamera
- 3. Plug-in schema nativescript
- 4. ListView.itemTemplate e immagini in NativeScript
- 5. Test dell'applicazione NativeScript con Appium
- 6. Posizione di BackgroundImage in Windows Form
- 7. Vue.js data-bind style backgroundImage not working
- 8. libgdx fullscreen senza bordi
- 9. ReactNative VS NativeScript: quali sono i vantaggi?
- 10. Come utilizzare la libreria rapida in NativeScript?
- 11. Nativescript android rimuovere la barra delle azioni
- 12. Finestra di dialogo personalizzata in NativeScript
- 13. Fullscreen texture iPhone OpenGL ES
- 14. AirPlay per Apple TV Fullscreen
- 15. pygame dual monitor e fullscreen
- 16. HTML5 API FullScreen con JavaScript
- 17. MPMoviePlayerController fullscreen quirk in iPad
- 18. Javascript richiesta fullscreen è inaffidabile
- 19. Verificando browser è in fullscreen
- 20. VideoView & Fullscreen & Modifiche all'orientamento - Android
- 21. iOS7 UINavigationBar BackgroundImage è impostato a testa in giù
- 22. Creazione di un fullscreen Toast personalizzato
- 23. Come disattivare FullScreen in MPMoviePlayerViewController in iOS
- 24. Pycharm fullscreen su 2 monitor: è possibile?
- 25. Force FullScreen su EditText in Android
- 26. Appbar Metro-style in programma WPF fullscreen
- 27. Commutazione fullscreen e orientamento come YouTube
- 28. Come impostare XML fullscreen in Android
- 29. nativescript-sqlite e angular2 modulo non trovato eccezione
- 30. Come creare un progetto NativeScript per IOS su Windows?
Per favore, mostraci cosa hai provato. Forniscici un esempio minimo, completo e verificabile [MVCE] (http://stackoverflow.com/help/mcve) – wiredniko