如何创建重叠相乘的颜色 div？答案

【问题标题】：How to create overlapping multiplied color divs?如何创建重叠相乘的颜色 div？
【发布时间】：2015-01-04 12:29:50
【问题描述】：

我想每个人都从某个地方知道色彩理论的形象。

是否可以仅使用 CSS 创建类似的东西？减法混合颜色？或者任何其他避免大图像文件的方法？简单地添加opacity 属性是行不通的，因为它还会柔化原始背景颜色。

请随时编辑我准备好的小提琴：https://jsfiddle.net/leymannx/d4gghwhk/

<div id="parent">
    <div class="wrapper">
        <div id="child-1" class="circle">
            <div class="text">Cyan</div>
        </div>
        <div id="child-2" class="circle">
            <div class="text">Magenta</div>
        </div>
        <div id="child-3" class="circle">
            <div class="text">Yellow</div>
        </div>
    </div>
</div>

【问题讨论】：

你可以这样做fiddle使用rgb颜色
@VitorinoFernandes - opacity 在这里没有解决方案。它柔化了原来的颜色。
此页面上的示例 2 dev.w3.org/fxtf/compositing-1 几乎正是您想要的（只是颜色不同）。不幸的是，据我所知，它还不能在任何浏览器中运行
@Moobs - 非常接近！但它是加色混合。我需要减色混合。也许multiply 可以作为mix-blend-mode 工作。我试试看。

标签： css background-color multiplication color-theory

【解决方案1】：

This page 描述了一种 CSS 方法，该方法受...支持。

Chrome：在 Chrome 35 中支持背景混合模式。
- 混合混合模式，可以在“实验 Web 平台功能”下的 chrome://flags 中启用。

Firefox：在 2014 年 6 月 10 日发布的 Firefox 30 中实现背景混合模式。Firefox 将是第一个发布混合模式版本 31 的浏览器。

Safari：将在今年秋季推出的 Safari 8 中支持 background-blend-mode 和 mix-blend-mode。

Opera：在 Opera 22 中支持 background-blend-mode。mix-blend-mode 可以在“Experimental Web Platform Features”下的 opera://flags 中启用。

Internet Explorer：画布混合模式和混合混合模式被列为“考虑中”。

他们列出了很多示例，其中一些包括 Javascript，但您的 OP 中的图片可以使用纯 CSS 完成。

这会给出以下结果（如果您的浏览器设置如上）：

* {
    color: black;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 20px;
    text-shadow: 2px 2px 2px white;
}

.circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    mix-blend-mode: multiply;
}
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    mix-blend-mode: normal;
}
#child-1 {
    background: cyan;
    position: absolute;
    top: 100px;
    left: 100px;
}
#child-2 {
    background: magenta;
    position: absolute;
    top: 100px;
}
#child-3 {
    background: yellow;
    position: absolute;
    top: 0;
    left: 50px;
}

<div id="parent">
    <div class="wrapper">
        <div id="child-1" class="circle">
            <div class="text">Cyan</div>
        </div>
        <div id="child-2" class="circle">
            <div class="text">Magenta</div>
        </div>
        <div id="child-3" class="circle">
            <div class="text">Yellow</div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

可能是这样的http://jsfiddle.net/d4gghwhk/6/

* {
  color: white;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 20px;
  text-shadow: 0 0 2px black;
}
.circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
#child-1 {
  background: cyan;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: -1;
}
#child-11 {
  background: cyan;
  position: absolute;
  top: 100px;
  left: 100px;
  opacity: 0.5;
  z-index: 10;
}
#child-2 {
  background: magenta;
  position: absolute;
  top: 100px;
  z-index: -1;
}
#child-22 {
  background: magenta;
  position: absolute;
  top: 100px;
  opacity: 0.5;
  z-index: 10;
}
#child-3 {
  background: yellow;
  position: absolute;
  top: 0;
  left: 50px;
  z-index: -1;
}
#child-33 {
  background: yellow;
  position: absolute;
  top: 0;
  left: 50px;
  opacity: 0.5;
  z-index: 10;
}

<div id="parent">
  <div class="wrapper">
    <div id="child-1" class="circle"></div>
    <div id="child-11" class="circle">
      <div class="text">Cyan</div>
    </div>
    <div id="child-2" class="circle"></div>
    <div id="child-22" class="circle">
      <div class="text">Magenta</div>
    </div>
    <div id="child-3" class="circle"></div>
    <div id="child-33" class="circle">
      <div class="text">Yellow</div>
    </div>
  </div>
</div>

【讨论】：