我正在尝试这个
.pane {
background: url('../img/fondoapp.png');
background-size: 100% 100% !important;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
但是使用 .pane 或 .scrollcontent 会在我的其他选项卡中重复背景图像,而且当 native 键盘出现时它会调整图像大小。
最佳答案
首先要使背景图像适合整个元素的技巧是 background-size: cover
, 现在你可以这样上课了
.view-with-bg{
.view-content {
background-image: url('../img/fondoapp.png');
background-size: cover;
}
}
现在添加view-with-bg
至 <ion-view>
该选项卡并添加 view-content
到您想要背景图像的特定元素(在您的情况下为 <ion-content>
)。
或者
.view-with-bg{
.pane {
background-image: url('../img/fondoapp.png') !important;
background-size: cover !important;
}
}
只需添加 view-with-bg
至 <ion-view>
该选项卡的。这将仅适用于该特定页面。再加上这里很好post关于背景图片技巧。
关于css - 如何在 ionic 中设置响应式背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32232470/