Bootstrap传送带标题

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;