jquery - 在打开的菜单上使用 rgba 使页面变暗而不是使文本颜色变暗

Question

我试图在打开侧面导航菜单时使页面变暗。当我打开它时，我应用了 rgba 背景颜色，但这不适用于文本颜色，即使我设置了更高的 z-index。也不适用于输入字段，但为此我将输入背景设置为无并且有效。但我真正想要的是在打开菜单时使页面变暗，而不必弄乱输入颜色和使文本变暗。

这是我的代码:

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>

j查询

$( '.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 更改为 -1。