css - 如何在 ionic 中设置响应式背景图像？

Question

我正在尝试这个

.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 键盘出现时它会调整图像大小。

Answer 1

首先要使背景图像适合整个元素的技巧是 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关于背景图片技巧。