文字未顯示

<body> 
    <div class="sts-viewport-fill"> 
     <nav role="navigation" class="nav navbar-default"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <span class="navbar-brand">Knonet</span> 
       </div> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href=#>Log In</a></li> 
         <li><a href=#>Sign Up</a></li> 
         <li><a href=#>Help</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
     <div class="container-fluid"> 
      <h1 class="text-center">CONNECT WITH EVERYONE.<br> 
       <small>Knonet aims to connect the whole world with the Internet.</small> 
      </h1> 
     </div> 
    </div> 
    <div class="container sts-second-slide"> 
     Salut, et Bonjour! 
    </div> 
</body>

這就是我的HTML。我申請了一堆的CSS規則，如下所示：文字未顯示

body { 
    font-family: 'Source Sans Pro', 'Segoe UI Light', sans-serif; 
    font-weight: initial; 
    font-weight: 100; 
} 

.sts-viewport-fill { 
    position: absolute; 
    top:0;right:0;bottom:0;left:0; 
    background-color: #000000; 
    color: #ffffff; 
} 

.sts-viewport-fill .container-fluid h1 { 
    margin: 250px auto 100px auto; 
    font-weight: 900; 
} 

.navbar-collapse, nav [type="button"] { 
    border: none !important; 
    border-radius: 0%; 
} 

.sts-second-slide { 
    margin-top: 100px; 
}

就我而言，這使得div.sts-viewport-fill適應屏幕的整個視口，或者至少是剩下的部分。

問題？看那裏的法語嗎？ Salut，et Bonjour！？它沒有出現在瀏覽器中。注意：

有人能告訴我這是怎麼回事一個在這裏嗎？我有一個非常強烈的感覺，這與position: absolute;和top:0;bottom:0;規則有關。

Merci d'Avance！

PS：即使我將color: #fff;屬性應用於.sts-second-slide選擇器，我仍然沒有得到結果。

來源

2016-09-17 Aravind Suresh

也許它的第一個div，或者它只是文字背後。 Ty添加'.sts-second-slide {color：#ffffff; z-index：1000; }把它帶到前面，使它變成白色。 – C14L

您必須將position添加到該元素。

嘗試

.sts-second-slide { 
    margin-top: 100px; 
    position: relative; 
}

來源

2016-09-17 16:33:47 jakob

嘿謝謝！ * *的Merci！它的工作... –

不客氣:) – jakob

回答

相關問題