重叠div及伪元素导致背景颜色加深问题求助

问题原因 #

半透明（rgba）元素（包括伪元素）重叠时，颜色会叠加计算，导致重叠区域颜色加深。z-index仅调整元素层级，无法阻止下层半透明背景透过上层元素显示，因此无法解决叠加问题。

解决方案 #

以下两种方案可快速解决该问题：

方案一：移除右侧元素重叠区域的背景

通过渐变背景让右侧元素的重叠区域（左侧100px）变为透明，避免与伪元素叠加：

.default-header .right{
  /* 替换原background-color为渐变背景 */
  background: linear-gradient(to right, transparent 100px, rgba(136, 125, 117, 0.2) 100px);
  height: 50px;
  width: 50%;
  position: relative;
}

方案二：用不透明等效颜色覆盖重叠区域

计算出原半透明颜色在白色背景下的等效不透明色，将伪元素的边框颜色替换为该值，并提升伪元素层级覆盖右侧元素：

.default-header .left::after{
  content: "";
  width:  0;
  height: 0;
  /* 等效不透明颜色，与rgba(136,125,117,0.2)在白色背景下视觉一致 */
  border-top: 100px solid #e7e5e3;
  border-right: 100px solid transparent;
  position: absolute;
  left: 100%;
  z-index: 1; /* 确保伪元素在右侧元素上层 */
}

效果说明 #

两种方案都能让重叠区域的颜色与其他区域保持一致，不会出现加深情况。方案一无需调整颜色计算，更直观；方案二保持了元素的完整背景，适合需要保留右侧元素全区域背景的场景。

内容的提问来源于stack exchange，提问作者kawlorridor