Блог

В настоящее время у меня есть заголовок с загрузочной каруселью под заголовком. Я хочу сделать так, чтобы заголовок располагался поверх карусели, чтобы, когда я делаю заголовок прозрачным, он показывал изображения карусели через мой заголовок. Любой вклад в это будет весьма признателен, и я предоставил код ниже.

app.component.html

 lt;ng-containergt;  lt;app-headergt;lt;/app-headergt;  lt;app-carouselgt;lt;/app-carouselgt;  lt;app-product-carouselgt;lt;/app-product-carouselgt;  lt;app-promogt;lt;/app-promogt;  lt;app-footergt;lt;/app-footergt; lt;/ng-containergt;  

carousel.component.html

 lt;div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"gt;  lt;div class="carousel-indicators"gt;  lt;button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"gt;lt;/buttongt;  lt;button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"gt;lt;/buttongt;  lt;button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"gt;lt;/buttongt;  lt;/divgt;  lt;div class="carousel-inner"gt;  lt;div class="carousel-item active"gt;  lt;img src="assets/rolex2.jpg" class="d-block w-100" alt="..."gt;  lt;/divgt;  lt;div class="carousel-item"gt;  lt;img src="assets/rolex3.jpg" class="d-block w-100" alt="..."gt;  lt;/divgt;  lt;div class="carousel-item"gt;  lt;img src="assets/rolex.jpg" class="d-block w-100" alt="..."gt;  lt;/divgt;  lt;/divgt;  lt;button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"gt;  lt;span class="carousel-control-prev-icon" aria-hidden="true"gt;lt;/spangt;  lt;span class="visually-hidden"gt;Previouslt;/spangt;  lt;/buttongt;  lt;button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"gt;  lt;span class="carousel-control-next-icon" aria-hidden="true"gt;lt;/spangt;  lt;span class="visually-hidden"gt;Nextlt;/spangt;  lt;/buttongt; lt;/divgt;  

header.component.html

 lt;div class="myHeader"gt; lt;h1gt;NEBULAlt;/h1gt;  lt;app-navbargt;lt;/app-navbargt; lt;/divgt;  

заголовок.компонент.css

 .myHeader {  padding: 20px;  text-align: center;  background: transparent;  color: white;  font-size: 30px;  transition: top 0.3s;  width: 100%;  overflow: hidden;  font-family: 'Cormorant Garamond', serif; }  .myHeader:hover {  background: #1b1b1b; }  h1 {  letter-spacing: 5px;  margin-top: -6PX; }  

Я нашел решение, добавив a position: absolute; и a z-index: 1; в свой компонент заголовка.