Ionic 2 - 向页面添加背景图像
Ionic 2 - Adding a background image to a page
我刚刚安装了一个新的 Ionic 项目 - Ionic v2.0.0-beta.32
我想在全新安装的主页上添加背景图片,有没有人可以告诉我该怎么做?我所能找到的只是 Ionic 1 的信息,而且情况似乎大不相同。
根据我的发现,图片需要具有以下尺寸
2800px x 2800px
但除此之外我找不到任何其他教程。
这是我的第一个 Ionic 项目所以要温柔
谢谢大家
图片大小不限。
转到app/theme/app.core.scss
并添加以下代码
ion-content{
background-image: url('img/background.jpg');
}
这是假设您的图像文件的名称是 background.jpg
并且存储在 www/img/
文件夹中。
希望对您有所帮助
更新离子 3.x
转到app/app.scss
并添加以下代码
ion-content {
background-image: url('assets/img/background.jpg');
}
这是假设您的图像文件的名称是 background.jpg
并且存储在 assets/img
文件夹中。
在 ionic 2 中,只有将 img 文件夹放入 build 文件夹中,背景图像才有效。如果你去检查法师 url 它会告诉你我在 build/img/bg.jpg 中找到它尝试将文件夹 img 放入构建文件夹中。
www/build/img
对于 Ionic V4 他们在 scss 文件中使用了一些新的开关。这对我有用:
ion-content {
--background: url('../../assets/Welcome-screen.png') no-repeat 50% 10%;
}
我刚刚安装了一个新的 Ionic 项目 - Ionic v2.0.0-beta.32
我想在全新安装的主页上添加背景图片,有没有人可以告诉我该怎么做?我所能找到的只是 Ionic 1 的信息,而且情况似乎大不相同。
根据我的发现,图片需要具有以下尺寸
2800px x 2800px
但除此之外我找不到任何其他教程。
这是我的第一个 Ionic 项目所以要温柔
谢谢大家
图片大小不限。
转到app/theme/app.core.scss
并添加以下代码
ion-content{
background-image: url('img/background.jpg');
}
这是假设您的图像文件的名称是 background.jpg
并且存储在 www/img/
文件夹中。
希望对您有所帮助
更新离子 3.x
转到app/app.scss
并添加以下代码
ion-content {
background-image: url('assets/img/background.jpg');
}
这是假设您的图像文件的名称是 background.jpg
并且存储在 assets/img
文件夹中。
在 ionic 2 中,只有将 img 文件夹放入 build 文件夹中,背景图像才有效。如果你去检查法师 url 它会告诉你我在 build/img/bg.jpg 中找到它尝试将文件夹 img 放入构建文件夹中。
www/build/img
对于 Ionic V4 他们在 scss 文件中使用了一些新的开关。这对我有用:
ion-content {
--background: url('../../assets/Welcome-screen.png') no-repeat 50% 10%;
}