离子放置两个背景图像

Question

我想这样在我的离子应用程序中放置两个图像。后来这个

我正在对此进行测试

  ion-content {
    background: url('../assets/imgs/Untitleddesign.jpg'),
    url('../assets/imgs/Untitleddesign2.jpg') no-repeat !important;
    background-size: cover !important;
  }

Answer 1

您可以将第一张图像加载为background-image，第二张使用background-color

    ion-content {
      background-color: #ececec;
      background-image: url('../assets/imgs/Untitleddesign.jpg');
    }

但是即使没有图像也可以得到相同的效果

    ion-content {
      background-color: #ececec;
      background-image: linear-gradient(152deg, #7e6ecc 40%, #ececec 40% 100%);
    }

要使形状遍历内容并在滚动过程中部分覆盖它，可以在绝对定位的元素中使用具有透明度的渐变。

ion-content::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 99;
  pointer-events: none;
  background-image: linear-gradient(
    152deg,
    #7e6ecc 20%,
    rgba(0, 0, 0, 0) 20% 100%
  );
}

请参阅：https://codepen.io/dpu/pen/VwLBZEQ