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

Posted 2023-03-06

【中文标题】z-index 和不透明度 - 如何隐藏 div

【英文标题】：z-index and opacity - how to hide the div

【发布时间】：2014-06-03 05:20:29

【问题描述】：

尝试与我的一个朋友建立一个网站，但我们在其他 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;

【问题讨论】：

如果你想让圆圈出现在栏的下方，添加一个虚拟的 div 夹在圆圈和栏之间（当然与栏的大小相同）（也可以考虑应用 z-index适当）。给它一个背景：白色。这可能会有所帮助。

我们希望圆圈不可见（在黑条上），代码已添加。

【参考方案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/

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