javascript - 基于背景图像的黑白文本和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年代，clip-path s，我看过这个 https://aerolab.github.io/midnight.js/ (它不适合我的情况)但我总是得到错误的结果。您是否知道一种制作黑色/白色文本的方法，该文本知道白色背景并将文本变为黑色以及任何不是纯白色背景的内容，将颜色切换为白色？

我希望我的解释很清楚，任何解决方案甚至线索都非常受欢迎，即使它需要 javascript。谢谢你!

这是带有示例的代码笔:https://codepen.io/vlrprbttst/pen/jOPMzvd?editors=1100

非常感谢!

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>