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

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

Answer 3

如果您在Angular中使用nativeScipt，则可以使用：

＆＃13;

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

＆＃13;

<!-- in your .html: -->

<ScrollView class="my-class">

＆＃13;

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背景图像全屏

6 个答案: