分层的不透明元素一起创造了新的颜色

Question

我有一个设计：

我想有2个重叠的svg多边形。多边形2是否可能与其他元素重叠而产生较暗的颜色，而白色重叠而产生与非不透明元素相同的颜色？

更新

该标记无关紧要，因为我只是对颜色值感兴趣。我想知道背景值为白色时，其不透明度值（alpha）与rgb(0, 92, 150)相匹配的颜色值。

body {
  background: white;
}

.container {
  background: rgb(0, 92, 150);
}

.polygon-1 {
  fill: rgb(0, 92, 150);
}

.polygon-2 {
  fill: [a color value that has an alpha that, when it's over white, creates the same color as rgb(0, 92, 150) and creates the darker color effect when it overlays rgb(0, 92, 150)];
}

我猜this question与我的基本相同。

根据该问题提供的JS解决方案，它需要使用最少的rgb来计算alpha。在我的情况下，它为0。生成的rgba值为rgba(0, 92, 150, 1)（无不透明度）。这是否意味着该特定颜色无法产生所需的效果？

var min, a = (255 - (min = Math.min(r, g, b))) / 255;

在我的情况下，Math.min(0, 92, 150)是0，(255 - 0) / 255是1，所以我的alpha值原来是1。我需要使其小于1（至少一点）位）。

更新2

下面要进一步质疑一下，crude codepen可以说明我的观点。

Answer 1

这是我的处理方式： 我添加了第三种形状：rect而不是蓝色的.container，并且我正在使用<clipPath>在多边形之间进行裁剪。在示例中，我用红色填充，但是您可以用任何喜欢的颜色填充。

希望对您有帮助。

.outer-container {
  background: white;
  padding-top: 10rem;
}

.outer-container * {
  box-sizing: border-box;
}

.container {
  
  width: 300px;
  padding: 4px 10px 25px 10px;
  text-align: center;
  color: white;
  margin: 0 auto;
  position: relative;
}

h3 {
  font-size: 1.5rem;
  font-family: sans-serif;
  font-weight: 300;
  z-index: 10;
  position: relative;
}

svg {
  width: 100%;
  position: absolute;
  top: -5rem;
  left: 0;
  z-index: 1;
}

.polygon-1,
.polygon-2,
.polygon-3{
   fill: rgb(0, 92, 150);
}

<div class="outer-container">
  <div class="container">
    <h3>Education</h3>
    
    <svg viewBox="0 0 100 60">
      <defs>
      <polygon id="p1" points="10,40 72,0 85,25 15,53"></polygon>
      <polygon id="p2" points="10,10 90,25 80,55 25,53"></polygon> 
      <rect id="p3" y="40%" width="100%" height="60%" />
        
       <clipPath id="clip1">
       <use xlink:href="#p1"></use>    
       </clipPath>
       <clipPath id="clip2">
       <use xlink:href="#p3"></use>
       </clipPath>
      </defs>
      <use xlink:href="#p1" class="polygon-1"></use>
      <use xlink:href="#p2" class="polygon-2"></use>
      <use xlink:href="#p3" class="polygon-3"></use>
      <g fill="red">
      <use xlink:href="#p2" clip-path="url(#clip1)"  /> 
      <use xlink:href="#p2" clip-path="url(#clip2)"  />
      </g>
      
    </svg>
  </div>
</div>