Question

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

Answer 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>

Answer 2

一种可能性是使用（全屏）元素覆盖/屏蔽具有特定不透明度的某个z-index处的所有内容。然后确保那些需要突出显示的元素具有更大的z-index，以免受到蒙版的影响。

我可以更改DIV容器外的所有东西的不透明度吗？

2 个答案: