使用CSS在背景图像上实现黑白文本

Question

我试图实现这种效果：在一个双色标头上，文字为黑白色，在一侧始终是白色，而另一侧有一个不同颜色的背景图片。

这是用于此示例的css，它之所以有效，是因为图像具有纯黑色背景：

.text {
  position: relative;
  color: rgb(255, 255, 255);
  mix-blend-mode: difference;
  text-transform: uppercase;
  font-size: 60px;
}

如果背景图片没有纯黑色的背景，则此方法无效：

在这种情况下，我得到了我应该得到的结果，但我想要的是在左侧获取白色文本，右侧获取黑色文本，就像第一个例子中那样。

我一直在尝试使用CSS filter,mix-blend-mode，clip-path，我看到了这个https://aerolab.github.io/midnight.js/（它不适合我的情况），但最终结果总是错误的。你知道如何制作一种黑色/白色颜色的文本，它能识别白色背景并将文本变为黑色，而任何非纯白背景的颜色则切换为白色吗？

我希望我的解释清楚，任何解决方案或提示都非常欢迎，即使需要JavaScript也可以。谢谢！

这是一个具有示例的代码演示：https://codepen.io/vlrprbttst/pen/jOPMzvd?editors=1100

非常感谢！

- valerio0999

---

这个回答解决了你的问题吗？背景颜色混合文本 - SMAKSS

Answer 1

我尝试了一个似乎可行的方案。

我在您的图像顶部添加了一个黑色层（RGBA，alpha为0.8），宽度与原图相同，然后使用“filter: brightness(3);”过滤器调整了您的图像亮度。

不确定是否按照您所期望的方式渲染图像。

body {
  margin: 0;
  padding: 0;
}
header.second {
  height: 609px;
  background-image: url("https://thedefiant.net/wp-content/uploads/2019/10/22520100_1600239116694701_7307954682775296386_o.jpg");
  filter: brightness(3);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 600px 100%;
  background-color: #fff;
  border: 1px solid red;
  display: flex;
  align-items: center;
  padding-left: 390px;
  position: relative;
}
header.second .mask {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  width: 600px;
  height: 100%;
}
header.second .text {
  position: relative;
  color: white;
  mix-blend-mode: difference;
  text-transform: uppercase;
  font-size: 60px;
}
 

<header class="second">
  <div class="mask"></div>
  <div>
    <div class="text" data-title="Sono caduto, ho pianto.">
      Sono caduto, ho pianto.
    </div>
  
    <div class="text" data-title="poi sono risalito">
      poi sono risalito
    </div>
  
    <div class="text" data-title="sei mejo te!">
      sei mejo te! sei mejo te!
    </div>
  </div>
</header>

- stavros90

---

不幸的是，图像变得更暗，文本也变得模糊了 :/ 这对我来说行不通，但还是谢谢你的帮助。 - valerio0999

Answer 2

您可以考虑使用渐变色来为文本着色，但需要知道图像的尺寸，以便正确设置值。

以下是仅包含第一部分的示例：

body {
  margin: 0;
  padding: 0;
}

header {
  height: 609px;
  background: 
   url("http://resources.doing.com/aaa/a.png") center right/auto 100% no-repeat;
  background-color: #fff;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 90px;
}

header>div {
  background: linear-gradient(to right, black calc(100% - 880px), white 0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text {
  text-transform: uppercase;
  font-size: 60px;
}

<header>
  <div>
    <div class="text" data-title="Elisa di Francisca">
      Elisa di Francisca
    </div>

    <div class="text" data-title="tenacia e determinazione">
      tenacia e determinazione
    </div>

    <div class="text" data-title="di una mamma in pedana">
      di una mamma in pedana
    </div>
  </div>
</header>

- Temani Afif