如何避免RGBA背景重叠？双DIV图形制作的CSS样式问题

架构老林

2026-5-26

解决两个Div背景重叠及Opacity继承问题

嘿，我懂你碰到的麻烦了——想用两个<div>组合出一个图形，结果它们重叠的部分背景颜色变深，试着给父元素加opacity又导致所有子元素都跟着变透明，这确实挺闹心的！

先帮你理清楚问题根源：

两个不透明的黑色<div>重叠时，颜色会叠加，看起来比单一区域更暗，这是因为两层黑色的视觉效果叠加了。
opacity属性是会被子元素继承的，而且这种继承无法通过子元素设置opacity:1来抵消，所以父元素设半透明后，所有子内容都会跟着变半透。

推荐解决方案：用RGBA颜色值替代Opacity

我们可以直接给每个<div>的背景色设置带透明度的RGBA值，这样背景是半透明的，但元素本身的内容（如果有的话）不会受影响，而且重叠区域的颜色叠加也会更自然。

先看你的原代码：

body{background:white; padding:0px; margin:0px}
#baz{ opacity:0.5}
#foo{ top:10px; left:60px; height:80px; width:200px; background: black; position:absolute; border-radius: 0 40px 40px 0 }
#bar{ height:100px; width:100px; background: black; border-radius:100px; position:absolute; }

修改后的代码：

body {
  background: white;
  padding: 0;
  margin: 0;
}
/* 移除父元素的opacity，改用RGBA控制背景透明度 */
#foo {
  top: 10px;
  left: 60px;
  height: 80px;
  width: 200px;
  /* RGBA格式：红、绿、蓝、透明度（0-1），这里是半透明黑色 */
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  border-radius: 0 40px 40px 0;
}
#bar {
  height: 100px;
  width: 100px;
  /* 同样设置半透明黑色背景 */
  background: rgba(0, 0, 0, 0.5);
  border-radius: 100px;
  position: absolute;
}