如何创建重叠的乘法颜色div？

Question

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

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

请随时编辑我准备好的小提琴：http://jsfiddle.net/koivo/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>

Answer 1

This page描述了一种CSS方式，这种方式得到了......

的支持

  

Chrome：支持Chrome 35中的后台混合模式。
    - 路上混合混合模式，可以在“实验性Web平台功能”下的chrome：//标志中启用。

     

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

     

Safari：今年秋天将在Safari 8中支持背景混合模式和混合混合模式。

     

Opera：支持Opera 22中的后台混合模式。可以在“实验性Web平台功能”下的opera：// flags中启用mix-blend-mode。

     

Internet Explorer：Canvas混合模式和mix-blend-mode列为“Under Consideration”。

他们列出了很多例子，其中一些包括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>

Answer 2

也许像这样http://jsfiddle.net/d4gghwhk/6/

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;