减少身体的不透明度，但不减少身体中的图像[重复]答案

【问题标题】：reduce opacity for body but not image in body [duplicate]减少身体的不透明度，但不减少身体中的图像[重复]
【发布时间】：2016-06-19 04:02:39
【问题描述】：

我正在尝试降低文档正文的背景颜色的不透明度，但将 ID 为 scene 的元素的背景颜色保持为完全不透明度。

目前，整个文档的不透明度正在降低到 0.5。

$(".artist").hover(function() {
  $("body").stop().animate({
    "opacity": 0.5
  });
}, function() {
  $("body").stop().animate({
    "opacity": 1
  });
});

body {
  background: yellow;
}
#scene {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="scene">
  <div class="artist">Test me</div>
</div>

【问题讨论】：

标签： jquery css opacity

【解决方案1】：

你不能真正做到这一点，因为body 内部的任何东西都是它的子元素，降低它的不透明度会降低子元素的不透明度。您可以使用 body:after {} 之类的伪元素并在那里设置背景。

但最简单的方法是使用 rgba 作为背景颜色：

body {
    background-color:rgba(0,0,0,0.5);
}

这将产生 50% 的黑色。

【讨论】：

【解决方案2】：

要使用 jQuery 执行此操作，您还需要使用 jQuery UI 为背景颜色设置动画。然后，您可以使用 rgba 来定位背景颜色，而不是更改为不透明度（这会影响子元素），如下所示：

$(".artist").hover(function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,0.0)"
  });
}, function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,1)"
  });
});

$(".artist").hover(function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,0.0)"
  });
}, function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,1)"
  });
});

body {
  background: #e6e6e6;
}
#scene {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="scene">
  <div class="artist">Test me</div>
</div>

【讨论】：