我可以更改 DIV 容器外所有内容的不透明度吗？答案

【问题标题】：Can I change the opacity of everything OUTSIDE a DIV container?我可以更改 DIV 容器外所有内容的不透明度吗？
【发布时间】：2016-08-31 10:57:58
【问题描述】：

我希望通过将我网站上各种 DIV 容器之外的所有内容变暗来突出我网站的某些元素。这可能吗？如果是这样，最好的方法是什么？

【问题讨论】：

您有两个完全有效的答案：1 在单击时屏蔽所有内容，除了要突出显示的 div，另一种方法（我的）屏蔽所有内容并突出显示 div。想要更多选择？

标签： php html css

【解决方案1】：

这应该会让您朝着正确的方向前进：http://codepen.io/anon/pen/BLBYXZ。你会有新的事情要弄清楚，比如让一切恢复正常。

<!doctype html>
<html>
  <head>
    <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
    <style>
      .fade div{opacity: .4}
      .fade div.spotlight{opacity: 1}
    </style>
  </head>
  <body>

    <div>Hi</div>
    <div>Me</div>
    <div>Google</div>
    <div>Pizza</div>

    <script>
      var divs = $('div');
      var body = $('body');
      divs.on('click', function() {
        var self = $(this);
        body.addClass('fade');
        self.addClass('spotlight');
      });
    </script>


  </body>
</html>

【讨论】：

【解决方案2】：

一种可能性是拥有一个（全屏）元素，以特定的不透明度覆盖/遮盖特定 z-index 处的所有内容。然后确保那些需要高亮的元素有更大的z-index，以免被遮罩影响。

【讨论】：