离子4:改变离子含量背景不起作用

Question

我在global.scss中尝试过作为

ion-content{
background-image: url('assets/images/cover.jpg');
-webkit-background-image: url('assets/images/cover.jpg');
background-repeat: no-repeat;
background-size:cover;
}

但是这并不渲染图像。尝试路径为/assets/images/cover.jpg。

如果我在显示的页面上放置与img标记相同的图像，则排除了无效图像的可能性。

我还试着把homeage.scss作为

.myview {
background-image: url('../../assets/images/cover.jpg');
background-repeat: no-repeat;
background-size:cover;
}

在home.html中使用class="myview"没有运气

Answer 1

您可以使用CSS变量--background来更改离子内容的背景。

示例：

ion-content{
--background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
}

将其放入您的组件、页面或全局scs中。

有关参考，请参阅：https://beta.ionicframework.com/docs/api/content#css-自定义属性

Answer 2

我通过以下操作解决了问题：

ion-content {
--background: none;
background-image: url('/assets/imgs/page_bg.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

这将禁用背景，然后设置正确的背景。

Answer 3

我也遇到过类似的情况，具有离子背景css属性会导致IOS 上出现闪烁问题

如果您遇到闪烁问题，请尝试以下操作

:host {
ion-content {
--background:none;
background:url(''../../assets/images/cover.jpg');
background-size: cover;
background-position: center center;
}
}

对于任何有键盘问题的人(键盘秀背景调整(安装键盘插件

https://ionicframework.com/docs/native/keyboard/

并在config.json 上添加以下代码

<preference name="keyboardResize" value="false" />
<preference name="keyboardResizeMode" value="native" />

注意：当项目显示时，这可能会将其隐藏在键盘下方(我只在iOS上测试过(

Answer 4

我尝试了@rchau的答案，但在我的情况下不起作用。相反，我把这些代码放在我的项目中，它做了正确的事情：

ion-content{
--background:url('../../assets/images/cover.jpg') 0 0/100% 100% no-repeat;
}

Answer 5

这是我的工作解决方案。

global.scs

ion-content {
--background: url('../assets/img/background/background.png') no-repeat 100% 100%;
}