slide in caption彈出錯誤div

我仍然在學習CSS，並且有一個令人困惑的問題，那就是在不同的div元素中出現滑入式標題。當我在沒有編輯它後面的圖像屬性的情況下自己標題滑動時，它工作得很好，但是當我在我的網頁中編輯它以使它更好地適應背景div底部的所有標題時彈出。slide in caption彈出錯誤div

THIS是圖形自己做的還是當我不編輯它時，但是如果你看下面的代碼，有什麼東西導致這個滑入式彈出在另一個div中，我無法弄清楚什麼它是。

CSS：

html, body { 
       margin: 0px; 
       padding: 0; 
       border: 0; 
       width: 100%; 
       height: 100%; 
      } 
      .background-image { 
       left: 0; 
       top: 0; 
       z-index: 1; 
       display: block; 
       background-image: url(https://www.kasandbox.org/programming-images/landscapes/mountains-in-hawaii.png); 
       background-size: cover; 
       width: 100%; 
       height: 100%; 
       -webkit-filter: blur(10px); 
       -moz-filter: blur(10px); 
       -o-filter: blur(10px); 
       -ms-filter: blur(10px); 
       filter: blur(10px); 
      } 
      .bodybox { 
       background-color: rgba(245, 245, 245, 0.6); 
       position:fixed; 
       padding:0; 
       margin:0; 
       border: 0; 
       top:0; 
       left:0; 
       width: 100%; 
       height: 100%; 
       z-index:2; 
       overflow: scroll; 
      } 
      .heading { 
       background-color: rgba(0,0,0,.75); 
       width: 100%; 
       height: 10%; 
       color: rgb(255,255,255); 
       text-align: right; 
       margin: 0; 
       border: 0; 
       padding: 0; 
       z-index: 2; 
       display: table; 
       vertical-align: center; 
      } 
      .travel_menu { 
       background-color: rgba(124,175,192,0.75); 
       color: rgb(255, 255, 255); 
       padding: 0; 
       height: 200px; 
       width: 100%; 
       max-width: 100%; 
       z-index: 2; 
       text-align: left; 
       vertical-align: center; 
       display: inline-flex; 
      } 
      . 
      figure { 
       z-index: 3; 
       display: block; 
       position: relative; 
       float: left; 
       overflow: hidden; 
       margin: 0 20px 20px 0; 
      } 
      figcaption { 
       position: absolute; 
       background: black; 
       background: rgba(0,0,0,0.75); 
       color: white; 
       padding: 10px 20px; 
       opacity: 0; 
       font-size: 15px; 
       -webkit-transition: all 0.6s ease; 
       -moz-transition: all 0.6s ease; 
       -o-transition:  all 0.6s ease; 
      } 
      figure:hover figcaption { 
       opacity: 1; 
      } 
      figure:before { 
       content: "?"; 
       position: absolute; 
       font-weight: 800; 
       background: black; 
       background: rgba(255,255,255,0.75); 
       text-shadow: 0 0 5px white; 
       color: black; 
       width: 24px; 
       height: 24px; 
       -webkit-border-radius: 12px; 
       -moz-border-radius: 12px; 
       border-radius:   12px; 
       text-align: center; 
       font-size: 14px; 
       line-height: 24px; 
       -moz-transition: all 0.6s ease; 
       opacity: 0.75; 
      } 
      figure:hover:before { 
       opacity: 0; 
      } 
      .cap-bot:before { bottom: 10px; left: 10px; } 
      .cap-bot figcaption { left: 0; bottom: -30%;} 
      .cap-bot:hover figcaption { bottom: 0; } 
      .container { 
       width: 300px; 
       height: 180px; 

      } 
      .container img { 
       width: 100%; 
       height: auto; 
      } 
      h2{ 
       padding-top: 0; 
       margin-top: 0; 
      } 
      h1{ 
       padding-top: 0; 
       margin-top: 0; 
       line-height: 10px; 
       padding: 10px 0; 
       display:table-cell; 
       vertical-align: bottom; 
      }

HTML：

<div class="background-image"></div> 
    <body> 

    <div class="bodybox"> 

     <div class="heading"><h1>Travel to ....</h1></div> 
     <div class="travel_menu"> 
     <div class="container"> 
      <figure class="cap-bot"> 
      <img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain."> 
      <figcaption> 
       Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead! 
      </figcaption> 
      </figure> 
     </div> 
     <div class="container"> 
      <figure class="cap-bot"> 
      <img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain."> 
      <figcaption> 
       Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead! 
      </figcaption> 
      </figure> 
     </div> 
     <div class="container"> 
      <figure class="cap-bot"> 
      <img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain."> 
      <figcaption> 
       Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead! 
      </figcaption> 
      </figure> 
     </div> 
     </div> 

    </div>  
    </body>

來源

2015-09-08 Alex

刪除人物前.看到小提琴http://jsfiddle.net/DIRTY_SMITH/hhftbyqk/6/

改變這一點：

. 
figure { 
        z-index: 3; 
        display: block; 
        position: relative; 
        float: left; 
        overflow: hidden; 
        margin: 0 20px 20px 0; 
       }

這樣：

figure { 
        z-index: 3; 
        display: block; 
        position: relative; 
        float: left; 
        overflow: hidden; 
        margin: 0 20px 20px 0; 
       }

來源

2015-09-08 21:14:12

我不知道那個小錯字如何設法做到這一點，但是這似乎並解決問題。好的趕上！謝謝您的幫助！ – Alex

slide in caption彈出錯誤div

回答

相關問題