如何避免CSS中两个div的透明度叠加问题

这个问题我之前也碰到过！用多个半透明元素叠加确实会出现重叠区域透明度翻倍的问题，给你两个方向的解决方案：

一、解决透明度叠加的问题 #

如果想保留两个div叠加的方案，不要用opacity属性，改用rgba或hsla来定义背景色的透明度。因为opacity会让整个元素（包括内容）透明，叠加时会累积透明度；而rgba只让背景色透明，元素本身的透明度是1，重叠区域只会混合背景色，不会出现透明度叠加的情况。

举个例子：

/* 不好的写法：用opacity导致叠加区域变深 */
.shape-part {
  opacity: 0.5;
  background-color: red;
}

/* 正确的写法：用rgba设置背景透明 */
.shape-part {
  background-color: rgba(255, 0, 0, 0.5);
  /* 不需要设置opacity */
}

这样两个div叠加后，重叠区域的颜色是两个rgba颜色的混合，视觉上是统一的半透明效果，不会出现更深的重叠区域。

二、更优的形状制作方案（推荐） #

其实完全不需要用两个div叠加来做形状，CSS有很多更简洁的方案，从根本上避免叠加问题：

1. 使用clip-path（最推荐） #

clip-path可以直接给单个元素定义任意形状，通过polygon()、circle()等函数画出你想要的轮廓，不需要叠加元素。比如做一个带切角的矩形：

.custom-shape {
  width: 200px;
  height: 150px;
  background-color: rgba(255, 0, 0, 0.5);
  /* 定义形状：左上角切角，其他角正常 */
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
}

这样一个div就能实现目标形状，加透明度也不会有任何叠加问题。

2. 使用CSS Mask #

如果形状比较复杂（比如不规则曲线），可以用CSS mask来实现，通过渐变或图片定义显示区域：

.custom-shape {
  width: 200px;
  height: 150px;
  background-color: rgba(255, 0, 0, 0.5);
  /* 用线性渐变做一个简单的遮罩，实现右侧切角 */
  mask: linear-gradient(135deg, transparent 20px, black 20px);
  -webkit-mask: linear-gradient(135deg, transparent 20px, black 20px);
}

3. 使用SVG #

如果形状非常复杂（比如带有弧线、不规则路径），直接用SVG绘制是最灵活的方式，SVG可以直接嵌入HTML，或者作为背景图，支持透明度且不会有叠加问题：

<svg width="200" height="150" viewBox="0 0 200 150">
  <path d="M20,0 L200,0 L200,150 L0,150 L0,20 Z" fill="rgba(255,0,0,0.5)" />
</svg>

内容的提问来源于stack exchange，提问作者Théo Champion