Nativescript背景图像全屏

Question

我想在页面上使用全屏图像在Nativescript中创建应用程序.我必须使用background-image: url('~/images/background.jpg');.但如何使其全屏显示.谢谢你的帮助

Answer 1

您需要使用NativeScript支持的CSS属性来实现此目的.

我在<Page>之前附加到视图的背景图像上使用了以下CSS ,它工作正常.

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

Answer 2

如果您希望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.