使用 mix-blend-mode 从它的父级中删除一个形状，同时保持同级文本正常

Question

我已经阅读了很多关于人们试图制作这种形状的帖子，我拥有的最佳解决方案是使用 mix-blend-mode:screen;。这些帖子已有 5 年以上历史，所以我希望有一种新的解决方案。

但是，我还需要文本不受 mix-blend-mode 的影响。我已经在包装器 <div> 中尝试了 isolation:isolate;，但这并没有帮助，因为圆圈刚刚消失或者不会敲掉白色容器，只是与它混合（是的，我意识到这就是它应该做的做，只是不是我需要它做的）。我还尝试将文本放在一个单独的 <div> 中并使用 position:absolute; 而在桌面上工作时，它没有响应并且看起来真的很 hacky。

所以，简而言之，我需要在不影响内容上的文本颜色的情况下制作下面的内容。

非常感谢任何帮助。

.bg { 
  background: #666; 
  height: 100vh;
  padding: 50px;
}

.flag {
  background-color: white;
  mix-blend-mode: screen;
  height: auto;
  padding: 20px;
  width: 400px;
  overflow: hidden;
  position: relative;
}

.flag p {
  font-family: 'Helvetica Neue LT Std 47 Light Condensed',Helvetica,Arial,Lucida,sans-serif;
  color: #58595B!important;
  font-size: 16px;
}

.green {
    color: #B3BE35;
}

.flag-circle {
    background-color: black;
    border-radius: 50%;
    width: 175px;
    height: 165%;
    position: absolute;
    top: -32%;
    right: -150px;
}

<div class="bg">
  
  <div class="flag">
    <p>
      In this example <strong class="green">the text needs to be normal</strong> and the mix-blend-mode should only apply to the circle cutting out the right side of the "flag".
    </p>
    <div class="flag-circle"></div>
  </div>
  
</div>

Answer 1

您可以使用 radial-gradient 和掩码来做到这一点。不需要 mix-blend-mode 和额外的元素。

.bg {
  background: #666;
  height: 100vh;
  padding: 50px;
}

.flag {
  background-color: white;
  /* mix-blend-mode: screen; */
  height: auto;
  padding: 20px;
  width: 400px;
  overflow: hidden;
  position: relative;
  --mask: radial-gradient(circle at calc(100% + 60px) 50%, transparent 0 87.5px, red 88.5px 100%) 0 0/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.flag p {
  font-family: 'Helvetica Neue LT Std 47 Light Condensed', Helvetica, Arial, Lucida, sans-serif;
  color: #58595B!important;
  font-size: 16px;
}

.green {
  color: #B3BE35;
}

<div class="bg">
  <div class="flag">
    <p>
      In this example <strong class="green">the text needs to be normal</strong> and the mix-blend-mode should only apply to the circle cutting out the right side of the "flag".
    </p>
  </div>
  </div

有背景图片：

.bg {
  background: url("https://picsum.photos/536/354") 50% 50%/cover;
  height: 100vh;
  padding: 50px;
}

.flag {
  background-color: white;
  /* mix-blend-mode: screen; */
  height: auto;
  padding: 20px;
  width: 400px;
  overflow: hidden;
  position: relative;
  --mask:radial-gradient(circle at calc(100% + 60px) 50%,  transparent 0 87.5px, red 88.5px 100%) 0 0/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.flag p {
  font-family: 'Helvetica Neue LT Std 47 Light Condensed', Helvetica, Arial, Lucida, sans-serif;
  color: #58595B!important;
  font-size: 16px;
}

.green {
  color: #B3BE35;
}

<div class="bg">
  <div class="flag">
    <p>
      In this example <strong class="green">the text needs to be normal</strong> and the mix-blend-mode should only apply to the circle cutting out the right side of the "flag".
    </p>
  </div>
  </div

使用 mix-blend-mode 从它的父级中删除一个形状，同时保持同级文本正常

Using mix-blend-mode to knock out a shape from it's parent, while keeping sibling text normal

html

css

mix-blend-mode