离子4:更改离子含量背景不起作用 [英] ionic 4: changing ion-content background does not work
问题描述
我曾在global.scss中尝试过
i have tried in global.scss as
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.
but this does not render the image. tried path as ./assets/images/cover.jpg as well.
如果我在显示排除无效图像可能性的页面上放置了与img标签相同的图像.
if i put the same image as img tag on the page that shows up ruling out invalid image possibility.
我还尝试将homeage.scss放入
I also tried to put in the homeage.scss as
.myview {
background-image: url('../../assets/images/cover.jpg');
background-repeat: no-repeat;
background-size:cover;
}
并在home.html中使用class ="myview"祝你好运
and using class="myview" in home.html no luck
推荐答案
您可以使用CSS-Variable --background更改离子含量的背景.
You can use the CSS-Variable --background to change the background of ion-content.
示例:
ion-content{
--background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
}
将其放入您的组件,页面或全局scss.
Put this into your components, pages or global scss.
有关参考,请参见: https://beta.ionicframework.com/docs/api/content#css-custom-properties
这篇关于离子4:更改离子含量背景不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!