离子 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-Variable --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

我遇到过类似的情况，有离子背景 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 3

我试过@rchau 的回答，但对我来说不起作用。相反，我将这段代码放在我的项目中并且它做了正确的事情：

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

Answer 4

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

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

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

Answer 5

这是适合我的解决方案。

global.scss

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

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

ionic 4: changing ion-content background does not work

css

typescript

ionic-framework

angular

ionic4