CSS - 颜色div的交集

Question

我想知道是否有纯CSS的解决方案来给两个div之间的交集着色。

例如，如果我有两个具有相同类的div，如下所示：

<div class="orange_square"></div>
<div class="blue_square"></div>

它们被放置在页面上，所以它们重叠在一起，就像这样:

我想让这两个div的交集部分变成红色，而且只用CSS实现。我在想是否有类似这样的东西:

.orange_square {
   background-color:orange;
}
.blue_square {
   background-color:blue;
}
.orange_square [overlap_operator?] .blue_square {
   background-color:red;
}

可以的吗？

- Lord Grosse Jeanine

---

你试过给橙色加一些透明度吗？ - adnan kamili

是的，但不幸的是那不是我真正想要的。 - Lord Grosse Jeanine

Answer 1

很抱歉，无法使用“纯CSS”实现

(抱歉)

然而...

虽然没有办法自动计算和定义这样一个区域纯粹使用CSS，但如果您知道两个“父”divs的尺寸，您可以硬编码它，而不会添加额外的DOM杂乱，这将是您只使用CSS和div元素所能接近的效果：

演示Fiddle

HTML

<div></div>
<div></div>

CSS

div {
    position:absolute;
    height:100px;
    width:100px;
}
div:first-of-type {
    background:orange;
}
div:last-of-type:before {
    content:'';
    height:33px;
    width:33px;
    display:block;
    position:absolute;
    background:red;
}
div:last-of-type {
    background:lightblue;
    top:75px;
    left:75px;
}

- SW4

---

我认为OP想要的是像颜色组合这样非常动态的东西，例如如果将橙色更改为蓝色，则相交的区域应该比固定的红色有另一种颜色。 - King King

@KingKing - 绝对没错，正如答案中所指出的那样 - 尽管他们要求“纯CSS”，但据我所知并没有办法。 - SW4

实际上，我只是想要一种检测两个 div 重叠的方法。然后，我就可以按自己的意愿设置它们的颜色。我正在创建一个带有事件（彩色 div）的时间轴，在我的时间轴中，当两个事件重叠时，我想将其标记为红色。但似乎在纯 CSS 中不可能实现这一点。我相信我会用 JS 实现这个功能，但如果有纯 CSS 的解决方案，那就太棒了 ^^ 不管怎样，感谢您的帮助。 - Lord Grosse Jeanine

@PiTiNiNjA - 很遗憾，如果不使用JS，这是不可能的。 - SW4

Answer 2

您可以尝试使用mix-blend-mode属性。

.orange_square,
.blue_square {
    position:absolute;
    height:100px;
    width:100px;
}

.orange_square {
    background: orange;
}

.blue_square {
    background: blue;
    top:75px;
    left:55px;
    
    /* the trick */
    mix-blend-mode: color-burn;
}

<div class="orange_square"></div>
<div class="blue_square"></div>

提示：始终检查兼容性表格 https://caniuse.com/#feat=css-mixblendmode

- leonardomerlin

---

非常有用，谢谢！我不知道这个属性！ - hugogogo