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

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解法，计算alpha需要rgb的最小数。在我的例子中，它是 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>