z-index 和不透明度 - 如何隐藏 div

Question

试图与我的一个朋友一起创建一个网站，但我们在其他不透明的 div 中遇到了 div 问题。

这是一张图片，可以清楚地说明：

如您所见，通过黑条可以看到圆圈 (div)。 但我们希望它像图片的左侧那样。

任何想法如何解决它？

//The black bar
.top-bar {
    width: 100%;
    height: 100px;
    background-color: black;
opacity: 0.8;
}

//A circle
.textbox_how {
    width: 820px;
    height: 820px;
    border: 20px #e8c499 solid;
    border-radius: 100%;
    left: 50%;
    position: absolute;
    top: 5%;
    text-align: center;
    z-index: -1;
}

//The other circle
.textbox_how_around {
    width: 840px;
    height: 840px;
    border: 10px brown solid;
    border-radius: 100%;
    left: 50%;
    position: absolute;
    top: 5%;
    text-align: center;
    z-index: -1;
}

Answer 1

@trunks175 是正确的。 在带有白色背景的标题后面放一个假人。

<div style="position:absolute;top:0;left:0;opacity:0.5;background:red;height:300px;width:300px;z-index:3"></div>
<div style="position:absolute;top:0;left:0;background:white;border:1px solid green;height:300px;width:300px;z-index:2"></div>
<div style="position:absolute;top:100px;left:100px;background:blue;height:300px;width:300px;z-index:1"></div>

这是一个小提琴： http : //jsfiddle.net/teRcg/1/

我相信这是实现您想要实现的目标的唯一方法，因为标题是不透明的。