Ionic 2 - 将背景图像添加到页面

时间:2016-07-25 11:02:22

标签: ionic-framework ionic2

我刚刚安装了一个新的Ionic项目 - Ionic v2.0.0-beta.32

我希望在新安装的主页上添加背景图片,是否有人可以告诉我我是如何进行此操作的?我能找到的只是Ionic 1的信息,事情似乎有很大不同。

从我发现的,图像需要是以下维度

2800px x 2800px

但除此之外我找不到任何其他教程。

这是我的第一个离子项目,所以要温柔

谢谢你们

3 个答案:

答案 0 :(得分:23)

图像可以是任何尺寸。

转到app/theme/app.core.scss并添加以下代码

ion-content{
    background-image: url('img/background.jpg');
}

假设您的图片文件名称为background.jpg,并存储在www/img/文件夹中。

希望这有帮助

UPDATE Ionic 3.x

转到app/app.scss并添加以下代码

ion-content {
    background-image: url('assets/img/background.jpg');
}

假设您的图片文件名称为background.jpg,并存储在assets/img文件夹中。

答案 1 :(得分:5)

对于 Ionic V4 ,他们在scss文件中使用了一些新开关。这对我有用:

ion-content {
  --background: url('../../assets/Welcome-screen.png')  no-repeat 50% 10%;
}

答案 2 :(得分:-1)

在离子2中,仅当您将img文件夹放入构建文件夹时,背景图像才起作用。如果你去检查法师网址它会告诉你我在build / img / bg.jpg中找到它试着把文件夹img放到build文件夹中。

WWW /建造/ IMG