离子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;
}

把它放到你的组件,页面或全局scss中.

有关参考,请参阅:https://beta.ionicframework.com/docs/api/content#css-custom-properties

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上进行过测试）