ionic 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” 没有运气

原文由 Vik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 CSS-Variable –background 更改 ion-content 的背景。

例子：

 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

原文由 Gary Großgarten 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是我的工作解决方案。

全局.scss

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

原文由 Sampath 发布，翻译遵循 CC BY-SA 4.0 许可协议