Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

You can't really do that because whatever is inside body is a child of it, and decreasing its opacity will decrease the opacity of the children. You could use pseudo-elements like body:after {} and set a background there.

But the easiest approach is to use rgba for the background color:

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

That will yield a 50% black color.

Answer 2

To do this with jQuery you need to also use jQuery UI to animate the background color. Then instead of changing to opacity (which affects child elements) you can target the background color using rgba like this:

$(".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>

降低身体的不透明度，但不降低身体的影像

2 个答案: