Ioni c поставил два фоновых изображения

Question

Я хочу поместить два изображения в мое приложение ioni c, как это. и позже это

Я проверяю это

  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%);
    }

Для сделав форму go поверх содержимого и частично накрыв ее во время прокрутки, вы можете использовать градиент с прозрачностью в элементе, расположенном абсолютно.

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