如何在覆蓋圖上放置文本？

試圖創建一個頁面，您可以按下按鈕，然後隱藏所有先前的文本，並在其上顯示新文本。如何在覆蓋圖上放置文本？

我做了所有這些，但新文本仍然被疊加層覆蓋。

無論如何要將文本放置在疊加層上嗎？（繞口令）現在它只是在它後面，有點昏暗/難以閱讀。

HTML：

<div class="row"> 
    <div class="col-12"> 
     <h1 class="contact-title">Portland Based</h1> 
    </div> 
    <div class="col-12 text-center"> 
     <button type="button" href="#" class="btn btn-outline-warning letsTalk hidden-xs-down" id="contact">Let's talk</button> 
     <button type="button" href="#" class="btn btn-warning letsTalk hidden-sm-up">Let's talk</button> 
    </div> 
    <div class="col-12"> 
     <div id="another" style="display:none;"> 
     <center> 
      <h2 class="center2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sit doloribus officiis praesentium assumenda, 
      quod eaque illum voluptatem voluptatum distinctio.</h2> 
     </center> 
     </div> 
    </div> 
    </div>

CSS：

h2.center2 { 
    margin: auto; 
    width: 60%; 
    padding: 10px; 
    color: white; 
    font-family: "Myriad Pro"; 
    text-align: center; 
    top: 70px; 
    position: relative; 
    } 

    @keyframes fadein { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
    } 
    /* Firefox < 16 */ 
    @-moz-keyframes fadein { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
    } 
    /* Safari, Chrome and Opera > 12.1 */ 
    @-webkit-keyframes fadein { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
    } 
    /* Internet Explorer */ 
    @-ms-keyframes fadein { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
    } 
    /* Opera < 12.1 */ 
    @-o-keyframes fadein { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
    }

的jQuery：

$("#contact").on('click blur keyup', function (e) { 
     if ($('#overlay').length == 0) { 
     $('body').append('<div id="overlay"> </div>'); 
     $('h1').hide(); 
     $('button').hide(); 
     $("#another").fadeIn("slow"); 
     } 
     if (e.which == 27) { 
     $('#overlay').remove(); 
     $('h1').show(); 
     $('button').show(); 
     } 
    }); 

    $('body').click(function (e) { 
     if (!$(e.target).is('#contact')) { 
     $('#overlay').remove(); 
     $('h1').show(); 
     $('button').show(); 
     } 
    });

來源

2017-06-21 Temple

嘗試h2.center2的z-index的設置爲10001

h2.center2 { 
margin: auto; 
width: 60%; 
padding: 10px; 
color: white; 
font-family: "Myriad Pro"; 
text-align: center; 
top: 70px; 
position: relative; 
z-index: 10001

來源

2017-06-21 19:04:17

謝謝！工作很棒！在時間限制結束後會接受答案。 – Temple

很好聽。需要注意的是，沒有位置屬性設置，z-index不起作用。 –

只需從#overlay中刪除背景顏色即可。

#overlay { 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity: 0.5; 
opacity: 0.5; 
z-index: 10000; 
display: block;

}

來源

2017-06-21 19:29:09

這會破壞重疊的目的;） – Temple

如何在覆蓋圖上放置文本？

回答

相關問題