nativescript - Nativescript背景图像全屏

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

时间:

你需要使用NativeScript支持的属性来实现这里目的。

我在附加到 <Page> 视图的background-image 上使用了以下 CSS,它可以正常工作。


.coverImage {


 background-image: '~/images/kiss.jpg';


 background-repeat: no-repeat;


 background-position: center;


 background-size: cover;


}



如果希望 Page 具有全屏图像 background,请将你的图像添加到 /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类分配给您的页面。

如果在 Angular 中使用 nativeScipt,则可以使用:


/*In your. css: */



.my-class {


 background-image: url("res://image-name.png") no-repeat;


}

<!-- in your. html: -->



<ScrollView class="my-class">

这不适用于GIF动画。 我的风格:


.page{


 background-image: url("~/assets/images/animated.gif") black;


 background-repeat: no-repeat;


 background-position: center;


 background-size: cover;


}



gif显示,居中和放大,非常好,但是静态的: 动画不移动。

...