透明div下的div消失了

Question

我正在建立一种效果，其中一个div消失，而另一个div稳定，但是无法创建该效果。 我想颠倒这个顺序。 请看这张图片<p>的背景变淡并且<div>突出显示，但是我希望div变浅并且文本突出显示。

这是代码：

div.background {
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60);
  /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

<div class="background" style="background-image: url('url of image')">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>