更改不透明度叠加层上的颜色 - CSS

Question

当两个不透明元素重叠时，不透明度会合并。我可以告诉CSS使重叠变成不同的颜色吗？例如，我可以有两个重叠的黄色元素，并在中间将它们变成橙色吗？

Answer 1

目前，您无法通过纯CSS。有一个CSS属性可以模拟Photoshop混合模式mix-blend-mode，但它还没有真正得到广泛支持。虽然混合模式仍取决于元素的颜色，但您无法指定重叠部分的颜色。

div {
  height: 100px;
  mix-blend-mode: multiply;
  position: absolute;
  width: 200px;
}

.left {
  background: cyan;
  left: 0;
}

.right {
  background: yellow;
  left: 150px;
}

<div class="left"></div>
<div class="right"></div>

Answer 2

纯粹通过CSS，我认为不可能。请试试这个答案，

How to make an transparent element overlap other elements?

https://css-tricks.com/equidistant-objects-with-css/

您也可以通过js在运行时给出css，或者使用element创建一个css类：first或last作为建议的第二个链接。