Перекрывать изображения на панели навигации Angular ⇐ CSS

[Anonymous]

У меня есть веб-сайт, и я хочу изменить пользовательский интерфейс. В моем проекте есть панель навигации. Моя цель — просто перекрыть изображения на домашней странице панелью навигации. Я использовал и менял z-index много раз. Но я не смог перекрыть изображение и панель навигации. И я сделаю панель навигации прозрачной.
изображения в home.html
панель навигации в app.html
домашний HTML:













app.html :
div class="banner" *ngIf="isBannerVisible">
{{ currentText }}



CALIENNA

• Mağaza
• Hakkımızda
• Bize Ulaşın

justify-content-between">




app.css:

.banner {
width: 100%;
background-color: #f8d7da;
color: #721c24;
text-align: center;
padding: 10px;
position: fixed;
top: 0;
left: 0;
z-index: 1050;
transition: opacity 0.5s ease-in-out;
}
.navbar {
z-index: 1000;
position: relative;
margin-top: 40px;
transition: background-color 0.3s ease;
}
.navbar.transparent {
background-color: rgba(255, 255, 255, 0);
}
.navbar.visible {
background-color: rgba(255, 255, 255, 0.9);
}


Подробнее здесь: https://stackoverflow.com/questions/785 ... ar-angular