Nativescript 背景图片全屏

Question

我想在 Nativescript 中创建页面上带有全屏图像的应用程序。我必须使用 background-image: url('~/images/background.jpg');。但是如何让它全屏。感谢您的帮助

Answer 1

您需要使用 CSS properties 支持的 NativeScript 来实现此目的。

我之前在附加到 <Page> 视图的背景图像上使用了以下 CSS，效果很好。

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

Answer 2

如果您将 nativeScipt 与 Angular 一起使用，您可以使用：

/*In your .css: */

.my-class {
    background-image: url("res://image-name.png") 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 */
}

注意：将此 CSS class 分配给您的 Page。

Answer 4

这不适用于 gif 动画。我的风格：

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

gif 显示，居中和放大，太棒了，但是静态的：动画没有移动。

Answer 5

这对我有用：

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';
}

Answer 6

我有一张非常大的图片，其中 background-size: cover; 在横向（挤压和缩小）/纵向（超出页面）中都没有很好地显示图像

最终对我来说最有效的是添加一个 Image 元素，并将其设置为背景

<Image src="~/assets/images/background.jpg" stretch="aspectFill" left="0" top="0" width="100%" height="100%"></Image>

<AbsoluteLayout>
    <Image src="~/assets/images/background.jpg" stretch="aspectFill" left="0" top="0" width="100%" height="100%"></Image>
    <StackLayout top="0" left="0" width="100%" height="100%">
        ... usual content here
    </StackLayout>
</AbsoluteLayout>

Nativescript 背景图片全屏

Nativescript background-image fullscreen

nativescript