css - 离子：离子幻灯片上的背景盖在部署时不起作用

Question

我的应用程序有我的背景问题。在我的屏幕上部署我的 css 属性“background-size:cover”将不起作用，并且图像被调整大小，就像它被转换为“width:100%; height:100%”一样。有什么解决办法吗？

我的scss代码：

page-home {
  ion-slides {

    ion-slide {
      background-size: cover;
      background-position: center;
      padding-left: 40px;
      padding-right: 40px;
      min-width: 365px !important;
    }

    #slide1 {
      background-image: url('../assets/img/fond1_opacity50.jpg');
      background-position: left;
    }

    #slide2 {
      background-image: url('../assets/img/fond2_opacity50.jpg');
      background-position: left;
    }

    [...]
  }
}

我的html代码：

<ion-content>
  <ion-slides autoplay="3000" loop="true" speed="500">
    <ion-slide id="slide1">
      [...]
    </ion-slide>
    <ion-slide id="slide2">
      [...]
    </ion-slide>
  </ion-slides>
</ion-content>

在手机上与在浏览器上：

标签： cssionic-framework

Answer 1

尝试这个，

  ion-content {
    background-size: cover;
  }

#slide1 {
  background-image: url('../assets/img/fond1_opacity50.jpg');
  background-position: left;
}