開いているメニューのrgbaでページdimが暗いテキストの色でない

Question

サイドナビゲーションメニューを開いたときにページを暗くしようとしています。私がそれを開くと、rgbaの背景色を適用しますが、高いz-インデックスを設定しても、テキストの色には適用されません。また、入力フィールドには適用されませんが、私は入力背景をnoneに設定し、それは機能します。しかし、私が本当に望んでいたのは、入力カラーを混乱させることなく、テキストを暗くすることなく、メニューを開いたときにページを暗くすることでした。

これは私のコードです：

HTML

  <input style="background:none" 
       id="input_01" 
       class="datepicker" 
       name="date" 
       type="text" 

       value="" 
       data-valuee=""> 

      <div class="letter" style="background-image:url(titlebkg.jpg); vertical-align:middle; text-align:  center; color:white; font-size:3em; z-index:-1">title</div> 

jqueryの

$('.toggle').on('touchstart click', function(e) { 
    e.preventDefault(); 

    var $body = $('body'), 
     $page = $('#page'), 
     $menu = $('#menu'), 


    $body.addClass('animating'); 


    if ($body.hasClass('menu-visible')) { 
    $body.addClass('left'); 
    $('#pageContainer').css({'background-color':'none'}); 
    } else { 
    $body.addClass('right'); 
    $('#pageContainer').css({'background-color':'rgba(0,0,0,0.2)'}); 
    } 

Answer 1

はあなたのコンテンツに対して絶対的なコンテナを使用してみてください。今

<div class="main-container"> 
    <div class="diming-container"> 
    </div> 
    <!-- Your content --> 
</div> 

それでも所望の効果を得ていない場合は、次のCSS

.main-container{ 
    position: releative; 
} 

.diming-container{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.2) 
} 

を追加し、トグルに全体の内容（入力）z-index to -1を変更してみてください。