Как сделать ion-nav прозрачным?

Итак, есть несколько вещей, которые вам нужно сделать. Во-первых, как сказал Деннис, я написал небольшое руководство по настройке прозрачности заголовков, которое вы можете подробно проверить здесь.

• Итак, сначала вы добавляете свойство ввода transparent к вашему nav-bar, что фактически добавляет background:transparent !important на панель инструментов.
• Также вы можете удалить граничную тень, которая отображается на Android, добавив no-border к вашему ion-header.
• Затем вы захотите удалить верхнее заполнение .scroll-content, поэтому заполнение заголовка игнорируется. Для этого просто добавьте top-padding: 0.
• Если вы хотите добавить слой градиента поверх слайдов, вам придется поработать над .slide-zoom, который автоматически генерируется ion-slide. Вы можете установить его высоту как 100%, а также ширину, а затем добавить что-то вроде background: linear-gradient(0deg, rgba(226, 135, 106, 0.84) 0%, rgba(255, 93, 152, 0.85) 100%) !important;
• Чтобы изменить стиль маркеров, вы должны использовать .swiper-pagination-bullet и .swiper-pagination-bullet-active.

Я написал очень быстрый пример, пытаясь достичь того, чего вы хотите:

Если вы этого хотите, я опубликовал репозиторий, чтобы вы могли использовать его в качестве справочного материала.

Я нашел действительно хорошее решение: Учебник

1. Вы можете легко отредактировать заголовок ion: <ion-header no-border> (удалить границу на устройствах Android)
2. Добавьте атрибут transparent на панель навигации: <ion-navbar transparent>

Это то, что вам нужно:

По умолчанию контент располагается между верхним и нижним колонтитулами. Однако при использовании fullscreen="true" содержимое сможет прокручиваться «под» верхними и нижними колонтитулами. На первый взгляд, полноэкранный режим ничем не отличается от варианта по умолчанию, однако, добавив эффект прозрачности к заголовку, содержимое можно будет увидеть под заголовком при прокрутке пользователем.

Так что вам просто нужно добавить fullscreen="true" в свой контент, как это

<ion-content fullscreen="true">
  <!-- ... -->
</ion-content>