Бутстрап Карусель Подписи

Question

Я использую карусель Bootstrap в качестве фона страницы на одном веб-сайте с эффектами параллакса.

Это хорошо работает, за исключением одной проблемы. Надпись отображается в части параллакса страницы. Есть ли способ убрать заголовок после прокрутки страницы?

  <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
       <li data-target="#myCarousel" data-slide-to="1"></li> 
       <li data-target="#myCarousel" data-slide-to="2"></li> 
      </ol> 
      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
        <img src="images/Image-1.jpg" alt="Image 1"> 
        <div class="carousel-caption"> 
         <h3>Caption 1 goes here </h3> 
        </div> 
       </div> 

       <div class="item"> 
        <img src="images/Image-2.jpg" alt="Image 2"> 
        <div class="carousel-caption"> 
         <h3>Caption 2 goes here </h3> 
        </div> 
       </div> 

       <div class="item"> 
        <img src="images/Image-3.jpg" alt="Image 3"> 
        <div class="carousel-caption"> 
         <h3>Caption 3 goes here</h3> 
        </div> 
       </div> 

      </div> 

      <!-- Left and right controls --> 
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div> 


.carousel{ 
    height:700px; 
} 

.carousel .item { 
position:fixed; 
left:0 !important; 
width: 100%; 
height:100%; 
} 

    .carousel-inner img{ 
    width: 100%; /* Set width to 100% */ 
    margin: auto; 
} 

.carousel-caption h3 { 
    font-size:xx-large; 
} 

.carousel-caption { 
    top: 70%; 
    bottom:auto; 
} 

Answer 1

Если я получил это право, тогда ваша проблема - ваш css.

.carousel-caption { 
    top: 70%; 
    bottom:auto; 
} 

Сделать 70% что-то вроде 40% или просто 50px;