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

Question

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

但是，我还需要文本不受mix-blend-mode. 我已经尝试isolation:isolate;过包装<div>，但这并没有帮助，因为圆圈刚刚消失或不会敲掉白色容器，只是与它混合（是的，我意识到这是它应该做的，而不是我需要它做的）。我还尝试将文本单独放置并在桌面上<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>

标签： htmlcssmix-blend-mode

Answer 1

您可以使用radial-gradient和遮罩来做到这一点。不需要混合模式和额外的元素。

.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