基于背景色的CSS自定义文本颜色

Question

基于背景色的CSS自定义文本颜色

htmlcss

6

以下是我当前的屏幕截图。是否有可能使blob.svg内部的文本呈白色，而blob.svg外部的文本呈现blob的颜色(#e60050)？

此元素还具有视差效果，blob的滚动速度比文本慢。因此，文本不会始终以相同的方式/位置与blob重叠。根据滚动位置，文本甚至可能完全在blob内部或外部。

我已经尝试了各种mix-blend-mode的实现，但似乎无法弄清楚。

当前情况

<div id="sf-coming-up">
    <div class="title">Binnenkort in ons theater</div>
    <img class="blob" src="/assets/blob_vector_1.svg" />
</div>

.blob {
  position: absolute;
  top: 0;
  right: 20%;
  z-index: -1;
}

.title {
  padding-top: 50px;
  color: #FCFBFA;
  mix-blend-mode: difference;
}

- Rik Maton

1

我认为我之前在一个网站上看到过这种情况，他们把两个文本元素叠放在一起。 - MeltingDog

2

为什么你要这样对自己... - ZombieChowder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- clickbait · Accepted Answer

您可以尝试使用反色，并借助CSS过滤器重新反转整个内容，例如：

body {
  margin: 0;
}

#sf-coming-up {
  filter: invert(1);
  height: 100vh;
}

.blob {
  position: absolute;
  top: 15%;
  right: 15%;
  z-index: -1;
  width: 70%;
  height: 70%;
  border-radius: 25% 75% 25% 50% / 75% 25% 50% 25%;
  background: springgreen;
}

.title {
  padding: 25vh 0 0 12.5vh;
  color: springgreen;
  mix-blend-mode: difference;
}

<div id="sf-coming-up">
  <div class="title">Binnenkort in ons theater</div>
  <div class="blob"></div>
</div>

请看这里：一个警示