如何使用CSS更改两个div重叠区域的颜色？

方法1：利用混合模式（mix-blend-mode） #

这种方法通过调整上层元素的混合模式，让重叠区域呈现目标颜色，适合简单场景。

修改后的CSS代码：

.container {
  width: 300px;
  height: 300px;
  background: lightblue;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background: lightyellow;
}

.div2 {
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgb(234 54 67 / 100%); /* 改为不透明 */
  transform: rotate(30deg);
  left: 130px;
  mix-blend-mode: multiply; /* 混合模式，调整后重叠区域会变色 */
}

说明：混合模式会根据上下层颜色计算结果色，若需要精确控制颜色，这种方法灵活性有限。

方法2：使用Clip-Path创建独立重叠区域元素 #

这种方法精准度更高，通过clip-path裁剪出重叠区域，单独设置颜色。

HTML代码 #

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="overlap-area"></div> <!-- 新增重叠区域元素 -->
</div>

CSS代码 #

.container {
  width: 300px;
  height: 300px;
  background: lightblue;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background: lightyellow;
}

.div2 {
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgb(234 54 67 / 50%);
  transform: rotate(30deg);
  left: 130px;
}

.overlap-area {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #ff9900; /* 自定义重叠区域颜色 */
  /* 用clip-path裁剪出和div2重叠的部分 */
  clip-path: polygon(63% 0, 100% 37%, 100% 100%, 0% 100%);
}

说明：clip-path的坐标需根据div2的旋转和位置计算，可通过可视化工具调整路径，确保完全匹配重叠区域。

方法3：使用CSS Mask实现 #

通过mask让上层元素只显示非重叠部分，再添加独立的重叠区域元素，适合复杂形状场景。

CSS代码 #

.container {
  width: 300px;
  height: 300px;
  background: lightblue;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background: lightyellow;
}

.div2 {
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgb(234 54 67 / 50%);
  transform: rotate(30deg);
  left: 130px;
  /* 用mask隐藏div2和div1重叠的部分 */
  mask: url(#mask-div1);
  -webkit-mask: url(#mask-div1);
}

.overlap-area {
  position: absolute;
  width: 300px;
  height: 300px;
  background: #ff9900;
  transform: rotate(30deg);
  left: 130px;
  /* 只显示和div1重叠的部分 */
  mask: url(#mask-div2);
  -webkit-mask: url(#mask-div2);
}

HTML代码（需添加SVG遮罩） #

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="overlap-area"></div>
</div>

<svg width="0" height="0">
  <defs>
    <!-- 遮罩1：隐藏div2与div1重叠的部分 -->
    <mask id="mask-div1">
      <rect width="100%" height="100%" fill="white"/>
      <rect x="0" y="0" width="200" height="200" fill="black"/>
    </mask>
    <!-- 遮罩2：仅显示重叠部分 -->
    <mask id="mask-div2">
      <rect width="100%" height="100%" fill="black"/>
      <rect x="0" y="0" width="200" height="200" fill="white"/>
    </mask>
  </defs>
</svg>

说明：这种方法能精准控制重叠区域，适配各种复杂的元素形状与位置。

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