[基于带有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-modes s，clip-path s，我已经看到了这个https://aerolab.github.io/midnight.js/（不适合我的情况），但是我总是以错误的结果告终。您是否知道一种制作黑白色文本的方法，该文本可以识别白色背景，并且可以使文本变成黑色，如果不是纯白色背景，请将颜色切换为白色？

我希望我的解释很清楚，即使需要使用JavaScript，也欢迎任何解决方案甚至线索。谢谢！

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

非常感谢！

Answer 1

您可以考虑为文本添加渐变色，但是需要知道图像的尺寸才能正确设置值。

这里是仅第一部分的示例：

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>

Answer 2

我尝试了一些东西，似乎可以正常工作。

我在图像上以相同的宽度添加了一个黑色层（rgba的alpha为0.8）。然后过滤图像过滤器的亮度：亮度（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>