如何在离子中设置响应式背景图像？

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会在我的其他选项卡中重复显示背景图像,当本机键盘出现时,它会调整图像的大小.

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>该选项卡中.这仅适用于该特定页面.另外这里是关于背景图片技巧的好文章.