CSS 离子 4：更改离子含量背景不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53399998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ionic 4: changing ion-content background does not work
提问by Vik
i have tried in global.scss as
我在 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;
}
but this does not render the image. tried path as ./assets/images/cover.jpg as well.
但这不会渲染图像。也尝试将路径设为 ./assets/images/cover.jpg。
if i put the same image as img tag on the page that shows up ruling out invalid image possibility.
如果我在页面上放置与 img 标签相同的图像，以排除无效图像的可能性。
I also tried to put in the homeage.scss as
我也尝试将 homeage.scss 作为
.myview {
background-image: url('../../assets/images/cover.jpg');
background-repeat: no-repeat;
background-size:cover;
}
and using class="myview" in home.html no luck
并在 home.html 中使用 class="myview" 没有运气
回答by Gary Gro?garten
You can use the CSS-Variable --background to change the background of ion-content.
您可以使用 CSS-Variable --background 来更改 ion-content 的背景。
Example:
例子：
ion-content{
--background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
}
Put this into your components, pages or global scss.
将其放入您的组件、页面或全局 scss 中。
For reference see: https://beta.ionicframework.com/docs/api/content#css-custom-properties
参考：https: //beta.ionicframework.com/docs/api/content#css-custom-properties
回答by GianPierre Gálvez
I solved the problem doing the following:
我解决了以下问题：
ion-content {
--background: none;
background-image: url('/assets/imgs/page_bg.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
This will disabled background and then set the correct one.
这将禁用背景，然后设置正确的背景。
回答by kishorekumaru
I have encountered the similar situation, having ionic background css property leads to flickering issues on IOS
我也遇到过类似的情况，有ionic背景css属性导致IOS闪烁问题
try the following if you have encountered flickering issue
如果您遇到闪烁问题，请尝试以下操作
:host {
ion-content {
--background:none;
background:url(''../../assets/images/cover.jpg');
background-size: cover;
background-position: center center;
}
}
for anyone having keyboard issues (background resizes on keyboard show) install Keyboard plugin
对于任何有键盘问题的人（键盘显示背景调整）安装键盘插件
and add the following code on your config.json
并在您的 config.json 中添加以下代码
<preference name="keyboardResize" value="false" />
<preference name="keyboardResizeMode" value="native" />
Note:this may hide item beneath the keyboard when its shown (I have tested only on iOS)
注意：这可能会在显示时隐藏键盘下方的项目（我仅在 iOS 上测试过）
回答by Jaikant Chaturvedi
I tried answer from @rchau, but it did not work in my case. Instead, I put this code in my project and it has done the right thing:
我尝试了@rcau 的回答，但在我的情况下不起作用。相反，我把这段代码放在我的项目中，它做了正确的事情：
ion-content{
--background:url('../../assets/images/cover.jpg') 0 0/100% 100% no-repeat;
}
回答by Sampath
04-05-2019
04-05-2019
This is the working solution for me.
这对我来说是可行的解决方案。
ion-content {
--background: url('/assets/img/background/background.png') no-repeat 100% 100%;
}
