重叠的透明背景

Question

我设置了两个div元素，半透明渐变背景设置为其中一个，彼此重叠。其中一个是具有较高z-index和半透明渐变的标题，另一个是导航栏。两种div颜色混合，两者都显示在标题上。

如何只显示标题？我到处都看，但我不知道该怎么做。

以下是代码：

#container {
  position: relative;
  height: 100vh;
  box-sizing: border-box;
  background-color: DodgerBlue;
}
#header {
  position: relative;
  margin: 0 auto;
  height: 80px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  box-sizing: border-box;
  border-radius: 0 0 20% 30%;
  z-index: 1;
}
#nav {
  position: absolute;
  top: 0;
  left: calc(15% + .5px);
  width: 10%;
  height: 100%;
  box-sizing: border-box;
  background-color: cornflowerblue;
}

一张图片说明了问题所在：

Answer 1

不幸的是，你的css代码描绘了导航的绝对位置，因此与标题重叠。

你应该移除腹肌，否则会出血，因为一个在另一个之下 - 你不能通过css在交叉处剪切元素。

你可以添加一个伪元素：在导航之前给出一个高度和宽度，并且abs左上方有一个实心的十六进制值，甚至是白色，然后是：after元素超过不透明度但是这是真的破解方式并建议您更改标记/ css以在导航和标题的父容器上显示所需的颜色。

Answer 2

我无法评论所以这是我的解决方案：只需更改顶部：0;顶部：80px;你的导航风格，它将分开

Answer 3

好的，所以我找到了解决这种情况的方法。 您需要创建另一个div（我在后面的示例中给出了id="header_glow"），使其与标题div具有相同的维度，并仅为background: linear-gradient设置这个div。标题div应具有纯色背景。同时为div z-index提供彼此相等且大于导航z-index的{​​{1}}。

CSS代码：

#header {
  position: relative;
  margin: 0 auto;
  height: 80px;
  background-color: DodgerBlue;
  border-radius: 0 0 20% 20%;
  z-index: 1;
}
#header_glow {
  position: absolute;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  border-radius: 0 0 20% 20%;
  background: linear-gradient(90deg,
  rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}
#nav {
  position: absolute;
  top: 0;
  left: calc(15% + .5px);
  width: 10%;
  height: 100%;
  background-color: cornflowerblue;
}

See Attached pic