Question

我想将移动导航的背景设为不透明度0.5

我正在使用它：

$('body:not(#navigation-mobile)').css({opacity: '0.5'});

然而，当我想要#navigation-mobile之外的所有人时，整个身体都会变成不透明。

Answer 1

不透明度会影响所应用元素的所有子元素。要绕过它，将背景设置为没有子元素的自己的元素，并将不透明度仅应用于背景。你可能不得不在背景容器上使用这样的东西：

 position: fixed; top:0; left:0; z-index:1; width:100vw; height:100vh;

然后内容容器将位于顶部，同时给出：

 position: fixed; top:0; left:0; z-index:10;

然后，您可以在不影响内容的情况下将不透明度应用于背景。不要将背景应用于身体。制作一个单独的div并将其应用于该div。

Answer 2

如果没有您的HTML示例，就无法为您提供具体的解决方案，但是评论是正确的，将{1}}的不透明度应用会影响其中的所有内容。

假设您的结构类似于以下内容：

body

你可以这样做：

<body>
  <header></header>
  <nav id="navigation-mobile"></nav>
  <main></main>
  <footer></footer>
</body>

您需要根据标记调整选择器，但一般的想法是您使用$('body > *:not(#navigation-mobile)').css({'opacity': 0.5 })选择器将不透明度应用于您的移动导航的兄弟姐妹，然后将不透明度应用于他们的孩子。例如，如果您有一个包装所有内容的容器，则可以使用容器类/ ID替换选择器中的:not()。

如果您使用相关HTML编辑问题，我可以编辑我的答案，使其更具体。

Answer 3

无法删除子元素[1]

的不透明度

那么如果您将页面的其余部分（导航栏除外）改为一个元素，那该怎么办呢。

像这样：

<body>
  <div id="navigation-mobile">
    <ul class="inline-list">
      <li><a href="#">link1</a></li>
      <li><a href="#">link2</a></li>
      <li><a href="#">link3</a></li>
    </ul>
  </div>
  <div id="body">
    <div id="header">blabla</div>
    <div id="content">blabla</div>
    <div id="footer">blabla</div>
  </div>
</body>

通过这种方式，您只能使用此jquery代码：

$('#body').css({opacity: '0.5'});

导航栏将保持完全不透明。

使用Jquery

3 个答案: