Question

我正在尝试淡化页面主体，以使背景颜色变为淡入的颜色。我有一个div，它嵌套在我不想褪色的文档中的几层中。

body > .container > .bootstrap-body > .do_not_fade_this_div

html

<body>
    <div class="container">
        <div class="bootstrap-body">
            <div class="do_not_fade_this_div"></div>
        </div>
    </div>
</body>

jquery

我尝试过这种方法，但这会使身体褪色，而且会使我不想要的div消失。

$('body').children(':not(.container > .bootstrap-body > .do_not_fade_this_div)').fadeTo("fast", 0.2);

这会使背景变淡，而不是像我想要的那样.do_not_fade_this_div变淡，但是由于它没有使主体褪色，因此颜色是错误的。

$('.bootstrap-body').children(':not(.do_not_fade_this_div)').fadeTo("fast", 0.2);

如何淡化身体而不是特定的div？

Answer 1

通常，您不能更改元素的不透明度而不影响其子元素。
但是，您可以使用CSS3 transition为<body>的Alpha透明度设置动画：

jQuery(document).on('click', function() {
  jQuery('body').addClass('lighter');
});

body {
  background-color: rgba(255, 180, 170, 1);
  transition: background-color .5s;
}

body.lighter {
  background-color: rgba(255, 180, 170, .2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="bootstrap-body">
    <div class="do_not_fade_this_div">click anywhere</div>
  </div>
</div>

或者，您可以在<body>后面创建一个“底图”元素，其不透明度不会影响页面上的其他元素：

jQuery(document).on('click', function() {
  jQuery('#overlay').addClass('lighter');
});

body {
  margin: 0;
}

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: lightgreen;
  z-index: -1;
  opacity: 1;
  transition: opacity .5s;
}

#overlay.lighter {
  opacity: .2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="overlay"></div>

<div class="container">
  <div class="bootstrap-body">
    <div class="do_not_fade_this_div">click anywhere</div>
  </div>
</div>

另请参阅Parent div transparent background but not affect child div transparency。

尝试淡入身体而不是孩子div向下嵌套几个级别

1 个答案: